import React, { Component } from "react";
import { Table, Input, InputNumber, Select, Popconfirm, Form, Checkbox, Button, message } from 'antd';
import $ from 'jquery'

import * as echarts from 'echarts';

import schoolimg from "../img/school.png";
import stu from '../img/screenImg/stu.png'
import grider from "../img/screenImg/grider.png";
import specialstu from "../img/screenImg/specialStu.png";
import fiveold from "../img/screenImg/fiveold.png";
import {EventEmitter} from 'events';
export default new EventEmitter();
const CheckboxGroup = Checkbox.Group;
import { getDepartmentRoleAndFeaturesApi, getGridStudentInfoApi, getSchoolInfoApi } from '../js/api.js'

import {
    getCheckConditionByHourApi, getIndividualPatrolRankApi, getPatrolIndividualCountWeekApi, getInspectTimeByDayApi, getTroubleItemAndTimesApi,
    getAreaSpecialStudentsDistributeApi, inspectClassWorkAllApi, getTroublePointApi, getLastInspectClassWorkloadRankApi, getSpecialStudentsDistributeApi, getGridNumApi,
    getGridDefaultAreaApi, getSafetySceneContentApi, getGridAdminInfoApi, getGridOutAdminForSecurityAdminApi, mapDemo, getPatrolAndInspectCountApi, getPatrolIndividualCountApi,
    getAllPatrolPlanApi, attendanceUserInformationApi, getPatrolCountRencentMonthApi, getGridAllAdminApi, getSchoolNameByIdApi, getGridAllAdminApi2
} from '../js/bigScreen.js'


import {
    getStudentAndOtherRoleInOutRecordAboutBigScreenApi, getStudentInOutRecordDetailForGradeApi, getStudentInSchoolTimeDistributeApi, getStudentOutSchoolTimeDistributeApi,
    getStudentFirstInOrLastOutSchoolTimeApi, getAllInOrOutSchoolToDayApi, getStudentInOrOutSchoolTimesRankApi
} from '../js/bigScreen.js'

import { addModuleConfigApi, findModuleConfigApi, updateModuleConfigApi, updateModuleRoleConfigApi, updateModuleConfig2Api, getScreenModuleWatchApi, } from "../js/bigScreen.js"
import { Row, Col, Skeleton, Tabs } from 'antd';

import {
    BrowserRouter as Router, Route, Link, Redirect, Switch, NavLink
} from "react-router-dom";
import { getEchartsGridByGridparentIdApi, getMatrixEchartsGridByGridparentIdApi, getMatrixEchartsinspectAndpatrolandSecurityApi } from "../js/inadmingridApi";
import { MatrixTree } from "./MatrixTree.jsx";
import { MatrixTree1 } from "./MatrixTree1.jsx";


// config props



const { Option } = Select;
const TabPane = Tabs.TabPane;
const AMap = require("AMap");
const Loca = require("Loca");
const AMapUI = require("AMapUI");
var ee = ["巡更,巡检"];
//console.log("zzssyy"+ee);
const scale = 1.2
const info = (props) => {


    message.info(props, 0.2);
};

//饼图颜色列表
const colorList = [
    {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#95FF' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#95FF' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#295F' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#295F' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#329F' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#329F' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#95FF' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#95FF' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#35FF' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#35FF' // 100% 处的颜色
        }],
    },
    {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#81BEFF' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#3295FF' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#48D69E' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#00AA6C' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#2050D1' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#297AE6' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#A1AEFF' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#9686F3' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#FECAFF' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#D47FE6' // 100% 处的颜色
        }],
    }, {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#7EEAE6' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#1ABBB5' // 100% 处的颜色
        }],
    },
    {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#E27240' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#D85216' // 100% 处的颜色
        }],
    },
    {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#555CAD' // 0% 处的颜色
        }, {
            offset: 1,
            color: '#5662F5' // 100% 处的颜色
        }],
    }
];


//路由切换
const map = {
    "巡更": "/patrol/",
    "巡检": "/polling/",
    "校外网格": "/outgrid/",
    "校内网格": "/innergrid/",
    "考勤": "/kaoqin/"

}

function BigScreenHoc(WrappComponent) {

    return class BigScreen extends Component {

        constructor(props) {


            super(props)

            this.state = {
                schoolId: parseInt(this.props.match.params.schoolId) || 0,
                // schoolName: decodeURIComponent(decodeURIComponent(this.props.match.params.schoolName )) || "梯度测试",

                // schoolName: this.props.match.params.schoolName || "梯度测试",
                schoolName: "",
                mapType: this.props.match.params.mapType || 1,
                // module:  decodeURIComponent(decodeURIComponent(this.props.match.params.module ))|| "巡更,巡检"
               
                module: "",
             
                origin: this.props.match.params.origin || 'app'



            }

        }
        componentWillMount(){
        
        }

        componentDidMount() {
           
            console.log("============");
            // console.log("1"+ee+"======zsy");
            console.log(this.props.match.params);
            console.log(this.props);
            console.log(this.props.match);
           
            let id = parseInt(this.props.match.params.schoolId);
            this.getSchoolNameById(id);
            this.getScreenModuleWatch(id);
            //console.log("zsy"+this.state.schoolName);
        }
        getScreenModuleWatch=(id)=>{
            getScreenModuleWatchApi(id).then((res)=>{
                console.log(res.data)
                this.setState({
                    module:res.data.moudleWatch
                })
            }).catch((e)=>{
                console.log(e);
            })
        }
        getSchoolNameById = (id) => {
            getSchoolNameByIdApi(id).then((res) => {
                this.setState({
                    schoolName: res.data
                })
            }).catch((e) => {
                console.log(e);
            })
        }
        
        render() {


            return (

                <div className="screen_body_bg">

                    {/* <ProductDetail /> */}


                    <div className="screen_BgImg_top">


                        <PageTitle title='校内网格' schoolName={this.state.schoolName} />
                        <div className="titleline"></div>
                        {this.state.module ? <ScreenNav navdata={{
                            schoolId: this.state.schoolId,
                            schoolName: this.state.schoolName,
                            module: this.state.module,
                            mapType: this.state.mapType,
                            history: this.props.history,
                            origin: this.state.origin
                        }} /> :
                            <Empty></Empty>

                        }



                    </div>


                    <WrappComponent {...this.state} />

                </div>


            )

        }


    }

}

class Patrol extends Component {

    constructor(props) {
        super(props)


        this.state = {
            listers: [],
            schoolId: parseInt(this.props.schoolId) || 0,
            schoolName: this.props.schoolName || "梯度测试",
            mapType: this.props.mapType || 1,
            patrolData: { "今日巡更完成数": '0/0', "昨日巡更完成数": "0/0", "累计巡更完成数": "0/0" },
            // module: this.props.module || "巡更,巡检",
            module: "巡更,巡检,校内网格,校外网格,考勤",
            chartDataPatrolTimer: [],
            chartDataIndividualPatrolRank: {
                name: [],
                count: []
            },

            AccuracyRankData: {
                name: [],
                rate: []
            },
            realTimePatrol: {
                data: [],
                routeNum: 0,
            },
            chartDataPatrolAll: {
                monthList: [],
                chartData: [{
                    date: [],
                    real: [],
                    should: []
                }]
            },
            workPlanData: []

        }

    }

    componentDidMount() {
        // console.log('巡更', this.props);
        this.refreshdata();
        this.realTime = setInterval(this.realTimeSetInterval, 2300)
        this.SecurityAdminTableScroll = setInterval(this.tablescroll, 2000)

    }
    realTimeSetInterval = () => {
        $(".patrol_message_scroll_box", function () {
            //把顶部的边界清零
            $(".patrol_message_scroll_box .patrol_scroll:first").before($(".patrol_message_scroll_box .patrol_scroll:last"));

        })


    }
    componentWillUnmount() {
        clearInterval(this.realTime)
        clearInterval(this.SecurityAdminTableScroll)
    }

    tablescroll = (parent, sons) => {




        $(".SecurityAdminTableScrollBox", function () {
            //把顶部的边界清零
            $(".SecurityAdminTableScrollBox  .SecurityAdminTableScroll:first").before($(".SecurityAdminTableScrollBox  .SecurityAdminTableScroll:last"));

        })

        $(".SecurityAdminTableScrollBox .SecurityAdminTableScroll").css("border-right", "none");
        $(".SecurityAdminTableScrollBox .SecurityAdminTableScroll:last").css("border-right", "4px solid aqua");
        $(".GridTableScrollBox", function () {
            //把顶部的边界清零
            $(".GridTableScrollBox  .GridTableScroll:first").before($(".GridTableScrollBox  .GridTableScroll:last"));
        })

        $(".GridTableScrollBox .GridTableScroll").css("border-right", "none");
        $(".GridTableScrollBox .GridTableScroll:last").css("border-right", "4px solid aqua");
        $(".AreaAdminTableScrollBox", function () {
            //把顶部的边界清零
            $(".AreaAdminTableScrollBox  .AreaAdminTableScroll:first").before($(".AreaAdminTableScrollBox  .AreaAdminTableScroll:last"));
        })

        $(".AreaAdminTableScrollBox .AreaAdminTableScroll").css("border-right", "none");
        $(".AreaAdminTableScrollBox .AreaAdminTableScroll:last").css("border-right", "4px solid aqua");

    }

    refreshdata() {
        //近30天隐患处理top5
        getPatrolIndividualCountApi(this.state.schoolId)
            .then((res) => {

                let realTimePatrol = {}
                realTimePatrol.routeNum = res.data.routeNum;
                realTimePatrol.data = res.data.data
                this.setState({
                    realTimePatrol: realTimePatrol
                })
            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //巡更数据
        getPatrolAndInspectCountApi(this.state.schoolId)
            .then((res) => {

                let resData = res.data


                let data = {}
                data = { "今日巡更完成数": res.data.PatrolTodayDone.really + '/' + res.data.PatrolTodayDone.should, "昨日巡更完成数": res.data.PatrolYesterdayDone.really + '/' + res.data.PatrolYesterdayDone.should, "累计巡更完成数": res.data.PatrolTodayDone.patrolCount }

                this.setState({
                    patrolData: data
                })
            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //巡更日历
        getPatrolCountRencentMonthApi(this.state.schoolId)
            .then((res) => {
                this.setState({
                    chartDataPatrolAll: res.data,

                });

            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //巡更时钟
        getCheckConditionByHourApi(this.state.schoolId)
            .then((res) => {

                let d = []
                for (let index = 0; index < res.data.data.length; index++) {


                    d.push(
                        {
                            name: index + '~' + (index + 1),
                            value: res.data.data[index][1]

                        })
                }

                this.setState({
                    chartDataPatrolTimer: d
                });

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        //巡更近7天个人完成Top5

        getIndividualPatrolRankApi(this.state.schoolId)
            .then((res) => {

                let chartDataIndividualPatrolRank = {}
                let [name, count] = [[], []];
                for (var i = 0; i < res.data.length; i++) {
                    name[i] = res.data[i].username;
                    count[i] = res.data[i].symbolCount;
                }
                chartDataIndividualPatrolRank.name = name;
                chartDataIndividualPatrolRank.count = count


                this.setState({
                    chartDataIndividualPatrolRank: chartDataIndividualPatrolRank
                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //巡更排班
        getAllPatrolPlanApi(this.state.schoolId)
            .then((res) => {

                let resData = res.data
                this.setState({
                    workPlanData: resData
                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //巡更近7天准确率Top6

        getPatrolIndividualCountWeekApi(this.state.schoolId)
            .then((res) => {

                let AccuracyRankData = {
                    name: [],
                    rate: []
                }
                let data = [];
                let rate = [];
                let name = [];
                for (let i = 0; i < res.data.length; i++) {

                    if (res.data[i].RouteRightNumOrigin != 0)
                        data.push({
                            rate: (res.data[i].routeRightNum / res.data[i].routeDoneNum).toFixed(2),
                            name: res.data[i].realName
                        })
                }
                data.sort((a, b) => b.rate - a.rate)

                if (res.data.length >= 6) {
                    for (let i = 0; i < 6; i++) {
                        name[i] = data[i].name;
                        rate[i] = (data[i].rate * 100).toFixed(0);

                    }
                }
                else {
                    for (let i = 0; i < res.data.length; i++) {
                        name[i] = data[i].name;
                        rate[i] = (data[i].rate * 100).toFixed(0);

                    }
                }


                AccuracyRankData.name = name;
                AccuracyRankData.rate = rate



                this.setState({
                    AccuracyRankData: AccuracyRankData
                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });


    }
    render() {

        let cellSize = ["auto", "auto"];
        let pieRadius = 25;
        let winWidth;
        // 获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (winWidth < 1500) {
            cellSize = [55, 55];
            pieRadius = 24;
        }


        return (
            <div className='screen_center'>


                {/* <div className='screen_BgImg_top'>
                    <Row xs={24} sm={24} md={24} lg={24} xl={24}>
                        <PageTitle title='巡更' schoolName={this.state.schoolName} />
                        <ScreenNav navdata={{
                            schoolId: this.state.schoolId,
                            schoolName: this.state.schoolName,
                            module: this.state.module,
                            mapType: this.state.mapType,
                            history: this.props.history
                        }} />
                    </Row>


                </div> */}

                <div className="screen_main_center">
                    <div >


                        <Row gutter={[16, 24]}>

                            <Col span={6}>
                                <div className='templeate_bg scrennCenterA'>

                                    <TempleateTitle title="巡更数据" />  <DataShow data={this.state.patrolData} /></div>
                            </Col>
                            <Col span={12}>    <div className='templeate_bg  scrennCenterA'>
                                <TempleateTitle title="巡更日历" size="large" />
                                <div className='screen_echarts_box'>
                                    {

                                        (JSON.stringify(this.state.chartDataPatrolAll) ==
                                            '{"monthList":[],"chartData":[{"date":[],"real":[],"should":[]}]}') ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) :
                                            (
                                                <ChartCalendar
                                                    chartData={this.state.chartDataPatrolAll}
                                                    that={this}
                                                    divId={'screen_chartCalendar'}
                                                    pieRadius={pieRadius}
                                                    cellSize={cellSize}
                                                    fullScreenShow={true} />
                                            )
                                    }
                                </div>



                            </div></Col>
                            <Col span={6}>    <div className=' scrennCenterA'>


                                <div className="screen_notice templeate_bg">

                                    <TempleateTitle title="实时巡更" />
                                    <div className="patrol_message_scroll_box">



                                        {this.state.realTimePatrol.data.map((item) =>

                                            <div className=' patrol_scroll '>
                                                <div>{item.realName}</div>
                                                <div>{item.createTime}</div>
                                                <div>
                                                    <span>准确率</span><span>{(item.accuracy * 100).toFixed(0)}%</span>
                                                </div>
                                                <div>
                                                    <span>完成率</span><span>{(item.routeDoneNum / this.state.realTimePatrol.routeNum * 100).toFixed(0)}%</span>
                                                </div>

                                            </div>

                                        )}
                                    </div>
                                </div>

                                <div className="templeate_bg screen_xgplan">
                                    <TempleateTitle title="今日排班" />
                                    <ul className="screen_table SecurityAdminTableScrollBox">
                                        <li className='screen_table_th'>
                                            <span>班组名称</span>
                                            <span>工作时间</span>
                                            <span>班组负责人</span>

                                        </li>
                                        {
                                            this.state.workPlanData ? this.state.workPlanData.map((item) => <li className="SecurityAdminTableScroll">
                                                <span>{item.name}</span>
                                                <span>{item.startTime}~{item.endTime}</span>
                                                <span>{item.matesAll}</span>
                                            </li>) : <li>
                                                <span>暂无数据</span>
                                                <span>暂无数据</span>
                                                <span>暂无数据</span>
                                            </li>
                                        }
                                    </ul>

                                </div>


                            </div>
                            </Col>
                        </Row>
                    </div>
                    <div >


                        <Row gutter={[16, 24]}>

                            <Col span={6}>
                                <div className='templeate_bg screnn_content_bottom'>
                                    <TempleateTitle title="近7天巡更工作时间分布" />
                                    {
                                        this.state.chartDataPatrolTimer.length == 0
                                            ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) :
                                            (
                                                <TimerEcharts
                                                    chartData={this.state.chartDataPatrolTimer}
                                                    that={this}
                                                    divId={'screen_patrol_timer'}
                                                    listers={this.state.listers}
                                                    fullScreenShow={true}
                                                />
                                            )
                                    }

                                </div>
                            </Col>
                            <Col span={12}>    <div className='templeate_bg screnn_content_bottom '>
                                <TempleateTitle title="近7天个人完成计划数排名" size="large" />
                                {
                                    (JSON.stringify(this.state.chartDataIndividualPatrolRank) ==
                                        '{"name":[],"count":[]}')
                                        ?
                                        (
                                            <Empty
                                                style={{
                                                    marginTop: 200,
                                                }} />
                                        ) :
                                        (
                                            <TrianglrEcharts
                                                chartData={this.state.chartDataIndividualPatrolRank}
                                                that={this}
                                                divId={'IndividualPatrolRank'}
                                                listers={this.state.listers}
                                                fullScreenShow={true}
                                            />
                                        )
                                }



                            </div></Col>
                            <Col span={6}>    <div className='templeate_bg screnn_content_bottom'>
                                <TempleateTitle title="近7天个人完成准确率排名" />
                                {
                                    (JSON.stringify(this.state.AccuracyRankData) ==
                                        '{"name":[],"rate":[]}')
                                        ?
                                        (
                                            <Empty
                                                style={{
                                                    marginTop: 200,
                                                }} />
                                        ) :
                                        (
                                            <PercentageRankBar
                                                chartData={this.state.AccuracyRankData}
                                                that={this}
                                                divId={'screen_patrol_accuracyrank'}
                                                listers={this.state.listers}
                                                fullScreenShow={true}
                                            />
                                        )
                                }
                            </div></Col>
                        </Row>
                    </div>

                </div></div>

        )
    }

}


class KaoQin extends Component {

    constructor(props) {
        super(props)
        this.state = {
            schoolId: parseInt(this.props.schoolId) || 0,
            schoolName: this.props.schoolName || "梯度测试",
            mapType: this.props.mapType || 1,
            // module: this.props.module || "考勤",
            module: "巡更,巡检,校内网格,校外网格,考勤",
            chartDataTroublePointDitr: {
                legends: [],
                data: []
            },
            chartDataTroublePointRank: [],
            AccuracyRankData: {
                name: [],
                rate: []
            },

            chartDataPollingDay: {
                times: [],
                date: [],
            },
            nodealData: [],
            inspectClassWorkAllData: [],
            pollingData: { "学生总数": '0/0', "在校学生总数": "0/0", "离校学生总数": "0/0" },
            safetyData: '0/0',
            chartDataKaoQinTimer: [],
            chartDataKaoQinTimer1: [],
            firstInSchool: {},
            lastOutSchool: {},
            inOrOutSchoolAllToDay: [],
            chartDataStudentInOutSchool: {
                xdata: [],
                data1: [],
                data2: []
            },
            chartDataStudentInOutSchoolTimesRank: {
                xdata: [],
                ydata: []
            },
            reload: false

        }
    }
    componentWillMount() {
        this.refreshdata()
        this.timer = setInterval(() => this.refreshdata(), 300000);
        //this.timer = setInterval(() =>  this.handleResize(), 60000);

    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }

    handleResize = () => {
        this.setState({
            reload: true,
        }, () => {
            this.setState({ reload: false });
        });
    }

    refreshdata() {

        this.handleResize()
        //获取考勤学生总人数，老师总人数；当前学生在校人数，当前老师在校人数
        getStudentAndOtherRoleInOutRecordAboutBigScreenApi(this.state.schoolId)
            .then((res) => {
                let data = {}

                data = { "学生总数": res.data.studentTotal, "在校学生人数": res.data.currentStudentInSchool, "离校学生人数": res.data.studentOutAllTimes }
                this.setState({
                    pollingData: data,
                })

            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //近七天进校时间分布
        getStudentInSchoolTimeDistributeApi(this.state.schoolId)
            .then((res) => {

                let d = []
                for (let index = 0; index < res.data.data.length; index++) {
                    d.push(
                        {
                            name: index + '~' + (index + 1),
                            value: res.data.data[index][1]

                        })
                }

                this.setState({
                    chartDataKaoQinTimer: d
                });

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });


        //近七天离校时间分布
        getStudentOutSchoolTimeDistributeApi(this.state.schoolId)
            .then((res) => {

                let d = []
                for (let index = 0; index < res.data.data.length; index++) {
                    d.push(
                        {
                            name: index + '~' + (index + 1),
                            value: res.data.data[index][1]

                        })
                }

                this.setState({
                    chartDataKaoQinTimer1: d
                });

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //最早到校,最晚离校学生信息
        getStudentFirstInOrLastOutSchoolTimeApi(this.state.schoolId)
            .then((res) => {
                let firstInSchool = {};
                let lastOutSchool = {};
                this.setState({
                    firstInSchool: res.data[0] || '',
                    lastOutSchool: res.data[1] || ''
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //今日进出学生信息
        getAllInOrOutSchoolToDayApi(this.state.schoolId)
            .then((res) => {
                this.setState({
                    inOrOutSchoolAllToDay: res.data
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //分班级显示在校，离校学生 
        getStudentInOutRecordDetailForGradeApi(this.state.schoolId)
            .then((res) => {
                let data1 = [];
                let data2 = [];
                let xdata = [];

                xdata = res.data.gradeNames;
                data1 = res.data.studentInSchool;
                data2 = res.data.studentOutSchool;
                this.setState({
                    chartDataStudentInOutSchool: {
                        xdata: xdata,
                        data1: data1,
                        data2: data2
                    },
                });
            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //学生进出校排名次数
        getStudentInOrOutSchoolTimesRankApi(this.state.schoolId)
            .then((res) => {
                let xdata = [];
                let ydata = [];

                xdata = res.data.counts;
                ydata = res.data.studentNames;
                this.setState({
                    chartDataStudentInOutSchoolTimesRank: {
                        xdata: xdata,
                        ydata: ydata
                    },
                });
            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }
    render() {


        let cellSize = [55, 55];
        let pieRadius = 30;
        let winWidth;
        // 获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (winWidth < 1500) {
            cellSize = [55, 55];
            pieRadius = 24;
        }

        return (
            <div>
                {
                    this.state.reload ? <div /> :
                        <div className='screen_center'>
                            <div className="screen_main_center">
                                <div >
                                    <Row gutter={[16, 24]}>

                                        <Col span={6}>
                                            <div className='templeate_bg  scrennCenterA'>
                                                <TempleateTitle title="今日学生考勤" />
                                                {
                                                    this.state.pollingData == null

                                                        ?
                                                        (
                                                            <Empty
                                                                style={{
                                                                    marginTop: 200,
                                                                }} />
                                                        ) :
                                                        (
                                                            <DataShow data={this.state.pollingData} />
                                                        )
                                                }

                                            </div>
                                        </Col>
                                        <Col span={12}>    <div className='templeate_bg scrennCenterA'>
                                            <TempleateTitle title="今日学生进出校情况" size="large" />
                                            <div className='screen_echarts_box'>
                                                {
                                                    this.state.pollingData == null

                                                        ?
                                                        (
                                                            <Empty
                                                                style={{
                                                                    marginTop: 200,
                                                                }} />
                                                        ) :
                                                        (
                                                            <EditableTable titledata={['班级', '姓名', '时间', '进出状态']} data={this.state.inOrOutSchoolAllToDay} />
                                                        )
                                                }

                                            </div>



                                        </div></Col>
                                        <Col span={6}>    <div className='templeate_bg scrennCenterA'>


                                            <div style={{ height: "27%" }}>
                                                <TempleateTitle title="到校时间" subtitle="true" />
                                                <div className='screen_echarts_box'>
                                                    <div className='screen_echarts_inorout_first'>
                                                        <p className='time_font_style'>今日最早到校: {this.state.firstInSchool.grade}<span>{this.state.firstInSchool.studentName}</span>, 于<span>{this.state.firstInSchool.time}</span>。<br />
                                                            昨日最晚离校: {this.state.lastOutSchool.grade}<span>{this.state.lastOutSchool.studentName}</span>, 于<span>{this.state.lastOutSchool.time}</span>。</p>
                                                    </div>
                                                </div>
                                            </div>


                                            <div style={{ marginTop: '50px', height: "62%", width: "100%" }}>
                                                <TempleateTitle title="近7天学生进出次数排名" />

                                                <div style={{ height: "100%", width: "90%" }} >
                                                    {
                                                        this.state.chartDataStudentInOutSchoolTimesRank.xdata.length == 0
                                                            ?
                                                            (
                                                                <Empty
                                                                    style={{
                                                                        marginTop: 200,
                                                                    }} />
                                                            ) :
                                                            (
                                                                <StudentInOrOutTimesBar
                                                                    chartData={this.state.chartDataStudentInOutSchoolTimesRank}
                                                                    that={this}
                                                                    divId={'student_in_or_out_times'}
                                                                    fullScreenShow={true}
                                                                />
                                                            )
                                                    }

                                                </div>
                                            </div>

                                        </div></Col>
                                    </Row>
                                </div>
                                <div >


                                    <Row gutter={[16, 24]}>

                                        <Col span={6}>
                                            <div className='templeate_bg screnn_content_bottom'>

                                                <TempleateTitle title="近7天学生进校时间分布" />
                                                {
                                                    this.state.chartDataKaoQinTimer.length == 0
                                                        ?
                                                        (
                                                            <Empty
                                                                style={{
                                                                    marginTop: 200,
                                                                }} />
                                                        ) :
                                                        (
                                                            <TimerEcharts
                                                                chartData={this.state.chartDataKaoQinTimer}
                                                                that={this}
                                                                divId={'screen_patrol_timer'}
                                                                listers={this.state.listers}
                                                                fullScreenShow={true}
                                                            />
                                                        )
                                                }

                                            </div>
                                        </Col>
                                        <Col span={12}>    <div className='templeate_bg screnn_content_bottom '>

                                            <TempleateTitle title="今日班级考勤" size="large" />
                                            {
                                                (this.state.chartDataStudentInOutSchool.xdata.length == 0)
                                                    ?
                                                    (
                                                        <Empty
                                                            style={{
                                                                marginTop: 200,
                                                            }} />
                                                    ) :
                                                    (
                                                        <StudentForGradeBar
                                                            chartData={this.state.chartDataStudentInOutSchool}
                                                            that={this}
                                                            divId={'studentForGradeBar'}
                                                            fullScreenShow={true}
                                                        />
                                                    )

                                            }

                                        </div></Col>
                                        <Col span={6}>
                                            <div className='templeate_bg screnn_content_bottom'>
                                                <TempleateTitle title="近7天学生离校时间分布" />
                                                {
                                                    this.state.chartDataKaoQinTimer1.length == 0
                                                        ?
                                                        (
                                                            <Empty
                                                                style={{
                                                                    marginTop: 200,
                                                                }} />
                                                        ) :
                                                        (
                                                            <TimerEcharts
                                                                chartData={this.state.chartDataKaoQinTimer1}
                                                                that={this}
                                                                divId={'screen_patrol_timer1'}
                                                                listers={this.state.listers}
                                                                fullScreenShow={true}
                                                            />
                                                        )
                                                }
                                            </div></Col>
                                    </Row>
                                </div>

                            </div></div>
                }
            </div>
        )
    }

}

class Polling extends Component {

    constructor(props) {
        super(props)
        this.state = {
            schoolId: parseInt(this.props.schoolId) || 0,
            schoolName: this.props.schoolName || "梯度测试",
            mapType: this.props.mapType || 1,
            // module: this.props.module || "巡更,巡检",
            module: "巡更,巡检,校内网格,校外网格,考勤",
            chartDataTroublePointDitr: {
                legends: [],
                data: []
            },
            chartDataTroublePointRank: [],
            AccuracyRankData: {
                name: [],
                rate: []
            },

            chartDataPollingDay: {
                times: [],
                date: [],
            },
            nodealData: [],
            inspectClassWorkAllData: [],
            pollingData: { "今日巡检完成数": '0/0', "昨日巡检完成数": "0/0", "累计巡检完成数": "0/0" },
            safetyData: '0/0'

        }
    }
    componentWillMount() {
        // var query = window.location.search.substring(1);
        // console.log(query)
        this.refreshdata()

    }
    componentDidMount() {
    }

    refreshdata() {
        //巡检数据
        getPatrolAndInspectCountApi(this.state.schoolId)
            .then((res) => {





                let data = {}

                data = { "本周巡检完成数": res.data.InspectWeekDone.weekreal + '/' + res.data.InspectWeekDone.weekshould, "上周巡检完成数": res.data.InspectLastWeekDone.weekreal + '/' + res.data.InspectLastWeekDone.weekshould, "累计巡检完成数": res.data.inspectCount.inspectAllShould }
                let safetyData = res.data.DangerousInformation.safetySceneDealForAllTime + "/" + res.data.DangerousInformation.safetySceneFoundForAllTime
                this.setState({
                    pollingData: data,
                    safetyData: safetyData

                })
            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        //每日巡检次数
        getInspectTimeByDayApi(this.state.schoolId)
            .then((res) => {

                let times = [];
                let date = [];

                let datas = res.data.length > 31 ? res.data.slice(-31) : res.data


                for (let i = 0; i < datas.length; i++) {
                    times[i] = datas[i].times;
                    date[i] = datas[i].ymdDate.toString().split("-")[1] + "-" + res.data[i].ymdDate.toString().split("-")[2];

                }


                this.setState({
                    chartDataPollingDay: {
                        times: times,
                        date: date
                    },

                });



            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //巡检异常地点占比

        getTroublePointApi(this.state.schoolId)
            .then((res) => {

                let resDta = res.data

                let legends = [];
                let data = [];
                let data1 = [];

                resDta.map((item, index) => {

                    legends.push(item.address)
                    data.push({
                        name: item.address,
                        value: item.times,
                        unit: '次'
                    })
                    data1.push({
                        name: item.address,
                        value: item.times,

                    })
                })

                this.setState({

                    chartDataTroublePointRank: data1.splice(0, 10)
                });

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        // 巡检异常项目

        getTroubleItemAndTimesApi(this.state.schoolId)
            .then((res) => {



                let resDta = res.data

                let legends = [];
                let data = [];
                let total = 0
                resDta.map((item, index) => total += item.times)

                resDta.map((item, index) => {

                    legends.push(item.item)
                    data.push({
                        name: item.item,
                        value: item.times,
                        rate: (item.times / total).toFixed(2),
                        unit: '次'
                    })

                })
                this.setState({

                    chartDataTroublePointDitr: {
                        legends: legends,
                        data: data
                    },


                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //上周巡检排名

        getLastInspectClassWorkloadRankApi(this.state.schoolId)
            .then((res) => {

                let AccuracyRankData = {
                    name: [],
                    rate: []
                }
                let data = [];
                let rate = [];
                let name = [];
                for (let i = 0; i < res.data.length; i++) {


                    data.push({
                        rate: (res.data[i].finished / res.data[i].total).toFixed(2),
                        name: res.data[i].item
                    })
                }
                data.sort((a, b) => b.rate - a.rate)


                for (var i = 0; i < data.length; i++) {
                    name[i] = data[i].name;
                    rate[i] = (data[i].rate * 100).toFixed(0);

                }

                AccuracyRankData.name = name;
                AccuracyRankData.rate = rate



                this.setState({
                    AccuracyRankData: AccuracyRankData
                });


            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        //待处理隐患事件 
        getSafetySceneContentApi(this.state.schoolId)
            .then((res) => {

                let resData = []
                resData = res.data.filter(v => v.flag == 2)


                this.setState({
                    nodealData: resData
                })

            })
        //
        inspectClassWorkAllApi(this.state.schoolId)
            .then((res) => {



                this.setState({
                    inspectClassWorkAllData: res.data.inspectClassWorkAll
                })

            })


    }
    render() {


        let cellSize = [55, 55];
        let pieRadius = 30;
        let winWidth;
        // 获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (winWidth < 1500) {
            cellSize = [55, 55];
            pieRadius = 24;
        }

        return (
            <div className='screen_center'>
                {/* <div className='screen_BgImg_top'>
                    <Row xs={24} sm={24} md={24} lg={24} xl={24}>
                        <PageTitle title='巡检' schoolName={this.state.schoolName} />
                        <ScreenNav navdata={{
                            schoolId: this.state.schoolId,
                            schoolName: this.state.schoolName,
                            module: this.state.module,
                            mapType: this.state.mapType,
                            history: this.props.history
                        }} />
                    </Row>


                </div> */}

                <div className="screen_main_center">
                    <div >


                        <Row gutter={[16, 24]}>

                            <Col span={6}>
                                <div className='templeate_bg  scrennCenterA'>
                                    <TempleateTitle title="巡检数据" />
                                    {
                                        this.state.pollingData == null

                                            ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) :
                                            (
                                                <DataShow data={this.state.pollingData} />
                                            )
                                    }



                                </div>
                            </Col>
                            <Col span={12}>    <div className='templeate_bg scrennCenterA'>
                                <TempleateTitle title="本周班组巡检情况" size="large" />
                                <div className='screen_echarts_box'>
                                    <EditableTable1 titledata={['巡检班组', '上报隐患', '周计划数', '周完成进度', '负责人']} data={this.state.inspectClassWorkAllData} />

                                </div>



                            </div></Col>
                            <Col span={6}>    <div className='templeate_bg scrennCenterA'>


                                <div style={{ height: "27%" }}>
                                    <TempleateTitle title="待处理隐患事件" subtitle="true" finish={this.state.safetyData} />

                                    <LunBoNotice data={this.state.nodealData} LBdivId="notdealsafety" />

                                </div>


                                <div style={{ marginTop: '50px', height: "62%", width: "100%" }}>
                                    <TempleateTitle title="隐患项目占比" />

                                    <div style={{ height: "100%", width: "90%" }} >
                                        {/* <TempleateTitle title="巡检异常地点占比" /> */}

                                        {
                                            this.state.chartDataTroublePointDitr.legends.length == 0

                                                ?
                                                (
                                                    <Empty1
                                                        style={{
                                                            marginTop: 200,
                                                        }} />
                                                ) :
                                                (
                                                    <BluePie
                                                        chartData={this.state.chartDataTroublePointDitr}
                                                        that={this}
                                                        divId={'screen_poliing_troublepoint'}
                                                        labelshow='false'
                                                        fullScreenShow={true}
                                                    />
                                                )
                                        }
                                    </div>
                                </div>

                            </div></Col>
                        </Row>
                    </div>
                    <div >


                        <Row gutter={[16, 24]}>

                            <Col span={6}>
                                <div className='templeate_bg screnn_content_bottom'>

                                    <TempleateTitle title="每日巡检次数" />
                                    {
                                        (JSON.stringify(this.state.chartDataPollingDay) ==
                                            '{"times":[],"date":[]}')
                                            ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) :
                                            (
                                                <TimeBar
                                                    chartData={this.state.chartDataPollingDay}
                                                    that={this}
                                                    divId={'PollingDay'}

                                                    fullScreenShow={true}
                                                />
                                            )
                                    }


                                </div>
                            </Col>
                            <Col span={12}>    <div className='templeate_bg screnn_content_bottom '>

                                <TempleateTitle title="巡检异常地点Top10" size="large" />
                                {
                                    (this.state.chartDataTroublePointRank.length == 0)
                                        ?
                                        (
                                            <Empty
                                                style={{
                                                    marginTop: 200,
                                                }} />
                                        ) :
                                        (
                                            <RosePieEcharts
                                                chartData={this.state.chartDataTroublePointRank}
                                                that={this}
                                                divId={'screen_polling_Itemrank'}

                                                fullScreenShow={true}
                                            />
                                        )

                                }
                                

                            </div></Col>
                            <Col span={6}>    <div className='templeate_bg screnn_content_bottom'>
                                <TempleateTitle title="上周巡检工作排名" />
                                {
                                    (JSON.stringify(this.state.AccuracyRankData) ==
                                        '{"name":[],"rate":[]}')
                                        ?
                                        (
                                            <Empty
                                                style={{
                                                    marginTop: 200,
                                                }} />
                                        ) :
                                        (
                                            <PercentageRankBar
                                                chartData={this.state.AccuracyRankData}
                                                that={this}
                                                divId={'screen_polling_workyrank'}

                                                fullScreenShow={true}
                                            />
                                        )
                                }
                            </div></Col>
                        </Row>
                    </div>

                </div></div>

        )
    }

}

class OutGrid extends Component {

    constructor(props) {
        super(props)
        this.state = {
            schoolId: parseInt(this.props.schoolId) || 0,
            schoolName: this.props.schoolName || "梯度测试",
            mapType: this.props.mapType || 1,
            // module: this.props.module || "巡更,巡检",
            module: "巡更,巡检,校内网格,校外网格,考勤",
            makers: [],
            maploading: false,
            chartDataStuStreet: {
                legends: [],
                data: []
            },
            chartDataSpecialStuTye: {
                legends: [],
                data: []
            },
            chartDataSpecialStuStreet: {
                xdata: [],
                ydata: []
            },
            chartDataSpecialStuRank: {
                xdata: [],
                ydata: []
            },
            innerData: {

            },


            schoolMakerPos: null,

            center: [120.70833277343749, 29.99850503862479],



        }
        this.amapEvents = {


            created: (mapInstance) => {

                console.log("是我", mapInstance);
                this.map = mapInstance
            }

        };

        this.initAMap = () => {

        }
    }
    componentWillMount() {
        this.refreshdata()



    }
    componentDidMount() {

        this.map()

        this.setState({
            maploading: true

        })

    }

    refreshdata() {
        //特殊学生类型占比
        getSpecialStudentsDistributeApi(this.state.schoolId)
            .then((res) => {

                let legends = [];
                let data = [];
                let xdata = [];
                let ydata = [];
                let ydata2 = []


                legends = ['特殊学生', "非特殊学生"];
                xdata = ["特殊体质", "特殊家庭", "特殊心理", "特殊行为"];
                ydata = [res.data[0].physiqueNum, res.data[0].familyNum, res.data[0].psychologicalNum, res.data[0].behaviorNum]
                data = [{ name: "特殊学生", value: res.data[0].specialNum, unit: "人" }, {
                    name: "非特殊学生", value: res.data[0].notSpecialNum, unit: "人"
                }]



                this.setState({
                    chartDataSpecialStuTye: {
                        legends: legends,
                        data: data
                    },
                    chartDataSpecialStuRank: {
                        xdata: xdata,
                        ydata: ydata,
                        ydata2: ydata2

                    },


                    innerData: {
                        "学生总人数": res.data[0].studentNum,

                        "特殊学生总数": res.data[0].specialNum,
                        "校外网格长总数": res.data[0].gridoutadminNum,
                        "五老人员总数": res.data[0].fiveoldstaffNum,


                    }

                });



            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        //学生街道分布        
        getAreaSpecialStudentsDistributeApi(this.state.schoolId)
            .then((res) => {



                let legends = [];
                let data = [];
                let data1 = []

                res.data.map((item, index) => {

                    legends.push(item.street)
                    data.push({
                        name: item.street,
                        value: item.areaSpecialStudent,
                        unit: '人'
                    })
                    data1.push(
                        item.areaStudent)
                })

                this.setState({
                    chartDataStuStreet: {
                        legends: legends,
                        data: data
                    },
                    chartDataSpecialStuStreet: {
                        xdata: legends,
                        ydata: data1
                    }
                });

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });



    }

    map = () => {
        //eslint-disable-next-line  
        var map = new AMap.Map('screen_map', {
            mapStyle: 'amap://styles/darkblue',
            // viewMode: '2D',
            viewMode: '2D',
            pitch: 56,
            zoom: 12,
            center: [120.70833277343749, 29.99850503862479],
            zooms: [4, 18]
        });
        //eslint-disable-next-line  
        const layer = new Loca.HeatmapLayer({
            map: map
        });


        getSchoolInfoApi(this.state.schoolId)
            .then((res) => {
                if (res.data.position != '') {
                    let lon = parseFloat(res.data.position.toString().split(",")[0])
                    let lat = parseFloat(res.data.position.toString().split(",")[1])
                    var position = new AMap.LngLat(lon, lat);
                    let schoolpositon = {
                        longitude: lon,
                        latitude: lat
                    }
                    //eslint-disable-next-line  
                    var markerssss = new AMap.Marker({
                        map: map,
                        position: position,

                        icon: schoolimg,



                    });
                    map.add(markerssss);


                    map.setCenter(position);

                    this.setState({
                        schoolMakerPos: schoolpositon,
                        center: [lon, lat],

                    })


                }

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });


        getGridStudentInfoApi(this.state.schoolId)
            .then(res => {


                var list = [];




                //过滤没有经纬度的坐标
                let arr = res.data.filter((item, index) => parseInt(item.longitude) > 0)
                arr.forEach((item, index) => {

                    list.push({
                        coordinate: [parseFloat(item.longitude), parseFloat(item.latitude)],
                        count: 0
                    })


                })

                layer.setData(list, {
                    lnglat: 'coordinate',
                    value: 'count'
                });


                layer.setOptions({
                    style: {
                        radius: 20,
                        gradient: {
                            0.5: 'blue',
                            0.65: 'rgb(117,211,248)',
                            0.7: 'rgb(0, 255, 0)',
                            0.9: '#ffea00',
                            1.0: 'red'
                        },

                        // color: {
                        //     0.6: '#0D602A',

                        //     0.8: '#D8BC30',

                        //     1:'#D52913'
                        // }
                    }
                });

                layer.render();

                // arr.forEach((item, index) => {


                //         //eslint-disable-next-line  
                //         var markerssss = new AMap.Marker({
                //          //eslint-disable-next-line  
                //          position: new AMap.LngLat(parseFloat(item.longitude),  parseFloat(item.latitude)),


                //          icon:stu,



                //      });
                //      map.add(markerssss);



                // });




            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
















    }


    render() {


        let winWidth;
        // 获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (winWidth < 1500) {
            let cellSize = 'auto'

        }




        return (
            <div className='screen_center'>


                <div className="screen_main_center">
                    <div className="screen_margin">


                        <Row gutter={[16, 24]}>

                            <Col span={6}>
                                <div className='  scrennCenterB'>
                                    <div className=" templeate_bg scrennCenterC">
                                        <TempleateTitle title="特殊学生占比" />     {
                                            this.state.chartDataSpecialStuTye.legends.length == 0

                                                ?
                                                (
                                                    <Empty
                                                        style={{
                                                            marginTop: 200,
                                                        }} />
                                                ) :
                                                (
                                                    <BluePie
                                                        chartData={this.state.chartDataSpecialStuTye}
                                                        that={this}
                                                        divId={'SpecialStuTye'}

                                                        fullScreenShow={true}
                                                    />
                                                )
                                        }</div>

                                    <div className="templeate_bg scrennCenterC">
                                        <TempleateTitle title="特殊学生类型分布" />
                                        {this.state.chartDataSpecialStuRank.xdata.length == 0

                                            ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) :
                                            (
                                                <StreetBar
                                                    chartData={this.state.chartDataSpecialStuRank}
                                                    that={this}
                                                    divId={'SpecialStuTyeRank'}

                                                    fullScreenShow={true}
                                                />
                                            )
                                        }
                                    </div> </div>
                            </Col>
                            <Col span={12}>    <div className=' scrennCenterB '>

                                <div className="gridimg_box" >

                                    <DataShowB data={this.state.innerData} />



                                    <div style={{ width: '100%', height: '88%', }} id="screen_map"
                                    >
                                        {/* 
                                        <Map events={this.amapEvents} loading={Loading} center={this.state.center} zoom={18} status={this.state.status} callback={this.initAMap} amapkey={'c00036371951a0bb9391faa1b305829a'}
                                            mapStyle={this.state.mapStyle} useAMapUI={true}>

                                            {
                                                this.state.makers.length == 0 ? null : <Markers

                                                    markers={this.state.makers}

                                                    useCluster={this.state.useCluster}
                                                />
                                            }


                                            {
                                                this.state.schoolMakerPos == null ? null : <Marker position={this.state.schoolMakerPos}>
                                                    <div>

                                                        <img src={schoolimg} alt="" />
                                                        <span style={{ color: "#fff" }}> {this.state.schoolName}</span>
                                                    </div>





                                                </Marker>
                                            }
                                            <Boundaries useAMapUI={"true"} currentcenter={this.state.center} />








                                            {/* <Geolocation {...pluginProps} /> */}
                                        {/* </Map> */}
                                    </div>



                                </div>



                            </div></Col>
                            <Col span={6}>    <div className=' scrennCenterB'>
                                {/* <TempleateTitle title="待处理隐患事件" /> */}

                                <div className="templeate_bg scrennCenterC">
                                    <TempleateTitle title="特殊学生街道占比" />

                                    {
                                        this.state.chartDataStuStreet.legends.length == 0

                                            ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) :
                                            (
                                                <BluePie
                                                    chartData={this.state.chartDataStuStreet}
                                                    that={this}
                                                    divId={'screenouterStuStreet'}

                                                    fullScreenShow={true}
                                                />
                                            )
                                    }
                                </div>


                                <div className="templeate_bg scrennCenterC">

                                    <TempleateTitle title="学生街道分布" />

                                    {
                                        this.state.chartDataSpecialStuStreet.xdata.length == 0

                                            ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) :
                                            (
                                                <StreetBar
                                                    chartData={this.state.chartDataSpecialStuStreet}
                                                    that={this}
                                                    divId={'screenouterSpecialStuStreet'}

                                                    fullScreenShow={true}
                                                />
                                            )
                                    }
                                </div>


                            </div></Col>
                        </Row>
                    </div>

                </div></div>

        )
    }

}
// class MatrixTreeInfo extends Component{
//     constructor(props){
//         super(props);
//         this.state = {
//             chartData:props.chartData
//         };
//     }
//     componentDidMount(){
//         this.drawChart()
//     }
//     drawChart(){
//         var structColors = [
//             '#ed6f6d', '#f3765d', '#f77a57', '#f98866', '#f99579',
//             '#ff9f3b', '#f0a732', '#e6a840', '#e9b253', '#ebbb66',
//             '#78b7e8', '#59b1f3', '#66bbf5', '#6ec3f2', '#75cae2',
//             '#70cccc', '#5dc4c4', '#4dbebd', '#4cc1a7', '#4fca96',
//             '#4cc686'
//         ];
//         var RICH = {
//             name: {
//                 color: '#fff',
//                 fontSize: 24
//             },
//             basic: {
//                 color: '#fff',
//                 fontSize: 8,
//                 lineHeight: 16
        
//             }
//         };
//         var info2 = {
//          "name": "flare",
//          "children": [
//           {
//            "name": "analytics",
//            "children": [
//             {
//              "name": "cluster",
//              "children": [
//               {"name": "AgglomerativeCluster", "value": 3938},
//               {"name": "CommunityStructure", "value": 3812},
//               {"name": "HierarchicalCluster", "value": 6714},
//               {"name": "MergeEdge", "value": 743}
//              ]
//             },
//             {
//              "name": "graph",
//              "children": [
//               {"name": "BetweennessCentrality", "value": 3534},
//               {"name": "LinkDistance", "value": 5731},
//               {"name": "MaxFlowMinCut", "value": 7840},
//               {"name": "ShortestPaths", "value": 5914},
//               {"name": "SpanningTree", "value": 3416}
//              ]
//             },
//             {
//              "name": "optimization",
//              "children": [
//               {"name": "AspectRatioBanker", "value": 7074}
//              ]
//             }
//            ]
//           },
//           {
//            "name": "animate",
//            "children": [
//             {"name": "Easing", "value": 17010},
//             {"name": "FunctionSequence", "value": 5842},
//             {
//              "name": "interpolate",
//              "children": [
//               {"name": "ArrayInterpolator", "value": 1983},
//               {"name": "ColorInterpolator", "value": 2047},
//               {"name": "DateInterpolator", "value": 1375},
//               {"name": "Interpolator", "value": 8746},
//               {"name": "MatrixInterpolator", "value": 2202},
//               {"name": "NumberInterpolator", "value": 1382},
//               {"name": "ObjectInterpolator", "value": 1629},
//               {"name": "PointInterpolator", "value": 1675},
//               {"name": "RectangleInterpolator", "value": 2042}
//              ]
//             },
//             {"name": "ISchedulable", "value": 1041},
//             {"name": "Parallel", "value": 5176},
//             {"name": "Pause", "value": 449},
//             {"name": "Scheduler", "value": 5593},
//             {"name": "Sequence", "value": 5534},
//             {"name": "Transition", "value": 9201},
//             {"name": "Transitioner", "value": 19975},
//             {"name": "TransitionEvent", "value": 1116},
//             {"name": "Tween", "value": 6006}
//            ]
//           },
//           {
//            "name": "data",
//            "children": [
//             {
//              "name": "converters",
//              "children": [
//               {"name": "Converters", "value": 721},
//               {"name": "DelimitedTextConverter", "value": 4294},
//               {"name": "GraphMLConverter", "value": 9800},
//               {"name": "IDataConverter", "value": 1314},
//               {"name": "JSONConverter", "value": 2220}
//              ]
//             },
//             {"name": "DataField", "value": 1759},
//             {"name": "DataSchema", "value": 2165},
//             {"name": "DataSet", "value": 586},
//             {"name": "DataSource", "value": 3331},
//             {"name": "DataTable", "value": 772},
//             {"name": "DataUtil", "value": 3322}
//            ]
//           },
//           {
//            "name": "display",
//            "children": [
//             {"name": "DirtySprite", "value": 8833},
//             {"name": "LineSprite", "value": 1732},
//             {"name": "RectSprite", "value": 3623},
//             {"name": "TextSprite", "value": 10066}
//            ]
//           },
//           {
//            "name": "flex",
//            "children": [
//             {"name": "FlareVis", "value": 4116}
//            ]
//           },
//           {
//            "name": "physics",
//            "children": [
//             {"name": "DragForce", "value": 1082},
//             {"name": "GravityForce", "value": 1336},
//             {"name": "IForce", "value": 319},
//             {"name": "NBodyForce", "value": 10498},
//             {"name": "Particle", "value": 2822},
//             {"name": "Simulation", "value": 9983},
//             {"name": "Spring", "value": 2213},
//             {"name": "SpringForce", "value": 1681}
//            ]
//           },
//           {
//            "name": "query",
//            "children": [
//             {"name": "AggregateExpression", "value": 1616},
//             {"name": "And", "value": 1027},
//             {"name": "Arithmetic", "value": 3891},
//             {"name": "Average", "value": 891},
//             {"name": "BinaryExpression", "value": 2893},
//             {"name": "Comparison", "value": 5103},
//             {"name": "CompositeExpression", "value": 3677},
//             {"name": "Count", "value": 781},
//             {"name": "DateUtil", "value": 4141},
//             {"name": "Distinct", "value": 933},
//             {"name": "Expression", "value": 5130},
//             {"name": "ExpressionIterator", "value": 3617},
//             {"name": "Fn", "value": 3240},
//             {"name": "If", "value": 2732},
//             {"name": "IsA", "value": 2039},
//             {"name": "Literal", "value": 1214},
//             {"name": "Match", "value": 3748},
//             {"name": "Maximum", "value": 843},
//             {
//              "name": "methods",
//              "children": [
//               {"name": "add", "value": 593},
//               {"name": "and", "value": 330},
//               {"name": "average", "value": 287},
//               {"name": "count", "value": 277},
//               {"name": "distinct", "value": 292},
//               {"name": "div", "value": 595},
//               {"name": "eq", "value": 594},
//               {"name": "fn", "value": 460},
//               {"name": "gt", "value": 603},
//               {"name": "gte", "value": 625},
//               {"name": "iff", "value": 748},
//               {"name": "isa", "value": 461},
//               {"name": "lt", "value": 597},
//               {"name": "lte", "value": 619},
//               {"name": "max", "value": 283},
//               {"name": "min", "value": 283},
//               {"name": "mod", "value": 591},
//               {"name": "mul", "value": 603},
//               {"name": "neq", "value": 599},
//               {"name": "not", "value": 386},
//               {"name": "or", "value": 323},
//               {"name": "orderby", "value": 307},
//               {"name": "range", "value": 772},
//               {"name": "select", "value": 296},
//               {"name": "stddev", "value": 363},
//               {"name": "sub", "value": 600},
//               {"name": "sum", "value": 280},
//               {"name": "update", "value": 307},
//               {"name": "variance", "value": 335},
//               {"name": "where", "value": 299},
//               {"name": "xor", "value": 354},
//               {"name": "-", "value": 264}
//              ]
//             },
//             {"name": "Minimum", "value": 843},
//             {"name": "Not", "value": 1554},
//             {"name": "Or", "value": 970},
//             {"name": "Query", "value": 13896},
//             {"name": "Range", "value": 1594},
//             {"name": "StringUtil", "value": 4130},
//             {"name": "Sum", "value": 791},
//             {"name": "Variable", "value": 1124},
//             {"name": "Variance", "value": 1876},
//             {"name": "Xor", "value": 1101}
//            ]
//           },
//           {
//            "name": "scale",
//            "children": [
//             {"name": "IScaleMap", "value": 2105},
//             {"name": "LinearScale", "value": 1316},
//             {"name": "LogScale", "value": 3151},
//             {"name": "OrdinalScale", "value": 3770},
//             {"name": "QuantileScale", "value": 2435},
//             {"name": "QuantitativeScale", "value": 4839},
//             {"name": "RootScale", "value": 1756},
//             {"name": "Scale", "value": 4268},
//             {"name": "ScaleType", "value": 1821},
//             {"name": "TimeScale", "value": 5833}
//            ]
//           },
//           {
//            "name": "util",
//            "children": [
//             {"name": "Arrays", "value": 8258},
//             {"name": "Colors", "value": 10001},
//             {"name": "Dates", "value": 8217},
//             {"name": "Displays", "value": 12555},
//             {"name": "Filter", "value": 2324},
//             {"name": "Geometry", "value": 10993},
//             {
//              "name": "heap",
//              "children": [
//               {"name": "FibonacciHeap", "value": 9354},
//               {"name": "HeapNode", "value": 1233}
//              ]
//             },
//             {"name": "IEvaluable", "value": 335},
//             {"name": "IPredicate", "value": 383},
//             {"name": "IValueProxy", "value": 874},
//             {
//              "name": "math",
//              "children": [
//               {"name": "DenseMatrix", "value": 3165},
//               {"name": "IMatrix", "value": 2815},
//               {"name": "SparseMatrix", "value": 3366}
//              ]
//             },
//             {"name": "Maths", "value": 17705},
//             {"name": "Orientation", "value": 1486},
//             {
//              "name": "palette",
//              "children": [
//               {"name": "ColorPalette", "value": 6367},
//               {"name": "Palette", "value": 1229},
//               {"name": "ShapePalette", "value": 2059},
//               {"name": "SizePalette", "value": 2291}
//              ]
//             },
//             {"name": "Property", "value": 5559},
//             {"name": "Shapes", "value": 19118},
//             {"name": "Sort", "value": 6887},
//             {"name": "Stats", "value": 6557},
//             {"name": "Strings", "value": 22026}
//            ]
//           },
//           {
//            "name": "vis",
//            "children": [
//             {
//              "name": "axis",
//              "children": [
//               {"name": "Axes", "value": 1302},
//               {"name": "Axis", "value": 24593},
//               {"name": "AxisGridLine", "value": 652},
//               {"name": "AxisLabel", "value": 636},
//               {"name": "CartesianAxes", "value": 6703}
//              ]
//             },
//             {
//              "name": "controls",
//              "children": [
//               {"name": "AnchorControl", "value": 2138},
//               {"name": "ClickControl", "value": 3824},
//               {"name": "Control", "value": 1353},
//               {"name": "ControlList", "value": 4665},
//               {"name": "DragControl", "value": 2649},
//               {"name": "ExpandControl", "value": 2832},
//               {"name": "HoverControl", "value": 4896},
//               {"name": "IControl", "value": 763},
//               {"name": "PanZoomControl", "value": 5222},
//               {"name": "SelectionControl", "value": 7862},
//               {"name": "TooltipControl", "value": 8435}
//              ]
//             },
//             {
//              "name": "data",
//              "children": [
//               {"name": "Data", "value": 20544},
//               {"name": "DataList", "value": 19788},
//               {"name": "DataSprite", "value": 10349},
//               {"name": "EdgeSprite", "value": 3301},
//               {"name": "NodeSprite", "value": 19382},
//               {
//                "name": "render",
//                "children": [
//                 {"name": "ArrowType", "value": 698},
//                 {"name": "EdgeRenderer", "value": 5569},
//                 {"name": "IRenderer", "value": 353},
//                 {"name": "ShapeRenderer", "value": 2247}
//                ]
//               },
//               {"name": "ScaleBinding", "value": 11275},
//               {"name": "Tree", "value": 7147},
//               {"name": "TreeBuilder", "value": 9930}
//              ]
//             },
//             {
//              "name": "events",
//              "children": [
//               {"name": "DataEvent", "value": 2313},
//               {"name": "SelectionEvent", "value": 1880},
//               {"name": "TooltipEvent", "value": 1701},
//               {"name": "VisualizationEvent", "value": 1117}
//              ]
//             },
//             {
//              "name": "legend",
//              "children": [
//               {"name": "Legend", "value": 20859},
//               {"name": "LegendItem", "value": 4614},
//               {"name": "LegendRange", "value": 10530}
//              ]
//             },
//             {
//              "name": "operator",
//              "children": [
//               {
//                "name": "distortion",
//                "children": [
//                 {"name": "BifocalDistortion", "value": 4461},
//                 {"name": "Distortion", "value": 6314},
//                 {"name": "FisheyeDistortion", "value": 3444}
//                ]
//               },
//               {
//                "name": "encoder",
//                "children": [
//                 {"name": "ColorEncoder", "value": 3179},
//                 {"name": "Encoder", "value": 4060},
//                 {"name": "PropertyEncoder", "value": 4138},
//                 {"name": "ShapeEncoder", "value": 1690},
//                 {"name": "SizeEncoder", "value": 1830}
//                ]
//               },
//               {
//                "name": "filter",
//                "children": [
//                 {"name": "FisheyeTreeFilter", "value": 5219},
//                 {"name": "GraphDistanceFilter", "value": 3165},
//                 {"name": "VisibilityFilter", "value": 3509}
//                ]
//               },
//               {"name": "IOperator", "value": 1286},
//               {
//                "name": "label",
//                "children": [
//                 {"name": "Labeler", "value": 9956},
//                 {"name": "RadialLabeler", "value": 3899},
//                 {"name": "StackedAreaLabeler", "value": 3202}
//                ]
//               },
//               {
//                "name": "layout",
//                "children": [
//                 {"name": "AxisLayout", "value": 6725},
//                 {"name": "BundledEdgeRouter", "value": 3727},
//                 {"name": "CircleLayout", "value": 9317},
//                 {"name": "CirclePackingLayout", "value": 12003},
//                 {"name": "DendrogramLayout", "value": 4853},
//                 {"name": "ForceDirectedLayout", "value": 8411},
//                 {"name": "IcicleTreeLayout", "value": 4864},
//                 {"name": "IndentedTreeLayout", "value": 3174},
//                 {"name": "Layout", "value": 7881},
//                 {"name": "NodeLinkTreeLayout", "value": 12870},
//                 {"name": "PieLayout", "value": 2728},
//                 {"name": "RadialTreeLayout", "value": 12348},
//                 {"name": "RandomLayout", "value": 870},
//                 {"name": "StackedAreaLayout", "value": 9121},
//                 {"name": "TreeMapLayout", "value": 9191}
//                ]
//               },
//               {"name": "Operator", "value": 2490},
//               {"name": "OperatorList", "value": 5248},
//               {"name": "OperatorSequence", "value": 4190},
//               {"name": "OperatorSwitch", "value": 2581},
//               {"name": "SortOperator", "value": 2023}
//              ]
//             },
//             {"name": "Visualization", "value": 16540}
//            ]
//           }
//          ]
//         };
//         var structsDatas = [];
//         var formatUtil = echarts.format;
        
//         function formatStructData(children, structsDatas) {
//             // 添加每个单位的颜色
//             for (var prop in children) {
//                 var index = Math.floor(Math.random() * 20);
//                 var value = 1;
//                 if (children[prop].value !== 0) {
//                     value = children[prop].value;
//                 }
//                 var tmp = {
//                     itemStyle: {
//                         normal: {
//                             color: structColors[index]
//                         }
//                     },
//                     name: children[prop].name,
//                     children: [],
//                     value: children[prop].value
//                 }
//                 formatStructData(children[prop].children, tmp.children);
//                 if (tmp.children.length === 0) {
//                     delete tmp.children;
//                 }
//                 structsDatas.push(tmp);
//                 // return structs_datas;
        
//             }
        
//         }
        
//         function showMenu(param) {
//             // 可在此处添加右击操作内容
//             console.log('showMenu==============', param);
//             var event = param.event;
//             var pageX = event.offsetX;
//             var pageY = event.offsetY;
//             console.log('showMenu========', pageX, pageY);
        
//         }
//         formatStructData(info2.children, structsDatas);
//         let chart =echarts.init(document.getElementById('treeChart'));
//         chart.setOption({
//             title: {
//                 text: '树图构建组织结构',
//                 subtext: '2020-02-19',
//                 left: 'leafDepth'
//             },
//             tooltip: {
        
//                 formatter: function(info) {
//                     console.log('tool------', info);
//                     var val = info.data.value;
//                     var name = info.name;
//                     return [
//                         '<h4>' + name + '</>',
//                         '<div>Value:' + val + '</>',
//                     ].join('\n');
//                     // return [
//                     //     '{name|' + name + '}',
//                     //     '{basic| 资产数量：' + asset_num + '}',
//                     // ].join('\n');
//                 },
//                 // rich: RICH, tooltip不支持富文本
        
//             },
        
//             series: [{
//                 name: 'flare',
//                 type: 'treemap',
//                 visibleMin: 1,
//                 // data: format_struct_data(info2.children, structs_datas),
//                 data: structsDatas,
//                 leafDepth: 1,
//                 label: {
//                     normal: {
//                         show: true,
//                         position: 'insideTopLeft',
//                         formatter: function(a) {
//                             console.log('formatter==label=======', a);
//                             return '{Name|' + a.name + '}' + "\n\n" + "{basic|Value: " + a.data.value + '}' ;
//                             // return [
//                             //     '<div><h1>' + a.name + '</h1></div>',
//                             //     '<div><p>' + a.value + '</></div>',
//                             // ].join('');
//                         },
//                         textStyle: {
//                             // color: '',  label的字体颜色
//                             fontSize: '14',
//                             fontWeight: 'bold'
//                         },
//                         rich: RICH,
        
//                     },
//                     // emphasis: {
//                     //     show: true,
//                     //     position: 'insideTopLeft',
//                     //     formatter: function(a) {
//                     //         console.log('formatter===label======', a);
//                     //         return a.name + "\n\n" + "资产数量 : " + a.data.value + "\n等级得分";
//                     //     },
//                     //     textStyle: {
//                     //         fontSize: '14',
//                     //         fontWeight: 'bold'
//                     //     }
//                     // }
//                 },
//                 levels: [{
//                     itemStyle: {
//                         normal: {
//                             borderWidth: 0,
//                             gapWidth: 2
//                         }
//                     }
//                 }, {
//                     itemStyle: {
//                         normal: {
//                             gapWidth: 2
//                         }
//                     }
//                 }, {
//                     // colorSaturation: [0.35, 0.5],
//                     itemStyle: {
//                         normal: {
//                             gapWidth: 2,
//                             // borderColorSaturation: 0.6
//                         }
//                     }
//                 }],
//                 breadcrumb: {
//                     show: true,
//                     // "height": 22,
//                     left: "10%",
//                     top: "93%",
//                     emptyItemWidth: 25,
//                     itemStyle: {
//                         normal: {
//                             color: "#fff",
//                             borderColor: "rgba(255,255,255,0.7)",
//                             borderWidth: 1,
//                             shadowColor: "rgba(150,150,150,1)",
//                             shadowBlur: 3,
//                             shadowOffsetX: 0,
//                             shadowOffsetY: 0,
//                             textStyle: {
//                                 color: "#000",
//                                 fontWeight: 'bold'
//                             }
//                         },
//                         emphasis: {
//                             textStyle: {}
//                         }
//                     }
//                 },
//             }]
//         })
//         document.oncontextmenu = function() {
//             return false;
//         };
//         chart.on('contextmenu', showMenu);
//         window.onresize = chart.resize;
//     }
//     render() {
//         let chartStyle = {
//             height: '100%',
//             width: '100%',
//         };
//         return (<div id='treeChart' style={chartStyle} />)
//     }
// }
//树形结构图
class BigScreenChartGridInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that,
            zsytest:props.test
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        //console.log("=-=-"+this.state.zsytest);
        if (JSON.stringify(this.state.chartData) != '[]') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                //垂直树状图
                title: {
                    text: '校内网格信息展示',
                    left: 'left',
                },
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                  },
                  series: [
                    {
                      type: 'tree',
                      data: this.state.chartData,
                      left: '2%',
                      right: '2%',
                      top: '10%',
                      bottom: '20%',
                      symbol: 'emptyCircle',
                      orient: 'vertical',
                      expandAndCollapse: true,
                      label: {
                        position: 'top',
                        rotate: -90,
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 11
                      },
                      leaves: {
                        label: {
                          position: 'bottom',
                          rotate: -90,
                          verticalAlign: 'middle',
                          align: 'left'
                        }
                      },
                      animationDurationUpdate: 750
                    }
                  ]
                // title: {
                //     text: '校内网格信息展示',
                //     left: 'center',
                // },
                // tooltip: {
                //     trigger: 'item',
                //     triggerOn: 'mousemove'
                // },
                // series: [
                //     {
                //         type: 'tree',
                //         data: this.state.chartData,
                //         top: '5%',
                //         left: '7%',
                //         // orient: 'vertical',
                //         bottom: '1%',
                //         right: '20%',
                //         symbolSize: 9,
                //         label: {
                //             position: 'left',
                //             // rotate: -90,
                //             verticalAlign: 'middle',
                //             align: 'right',
                //             fontSize: 15
                //         },
                //         leaves: {
                //             label: {
                //                 position: 'right',
                //                 // rotate: -90,
                //                 verticalAlign: 'middle',
                //                 align: 'left'
                //             }
                //         },
                //         emphasis: {
                //             focus: 'descendant'
                //         },
                //         expandAndCollapse: true,
                //         animationDuration: 550,
                //         animationDurationUpdate: 750
                //     }
                // ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}


class InnerGrid extends Component {

    constructor(props) {
        super(props)
        this.state = {
            schoolId: parseInt(this.props.schoolId) || 0,
            AreaAdminTableData: [],
            schoolName: this.props.schoolName || "梯度测试",
            mapType: this.props.mapType || 1,
            // module: this.props.module || "巡更,巡检",
            module: "巡更,巡检,校内网格,校外网格,考勤",
            chartDataStuStreet: {
                legends: [],
                data: []
            },
            chartDataSpecialStuTye: {
                xdata: [1],
                ydata: []
            },
            chartDataSpecialStuStreet: {
                xdata: [],
                ydata: []
            },
            chartDataInnerGrider: {
                legends: [],
                data: []

            },
            chartDataSpecialStuRank: {
                xdata: [],
                ydata: []
            },
            griderTableData: [],
            SecurityAdminTableData: [],
            chartData: [],
            chartData2:[],
            chartData3:[],
            chartLoading1: true,
            test:'zsy',
            chartLoading: true


        }
    }

    componentDidMount() {

        this.refreshdata()
        this.SecurityAdminTableScroll = setInterval(this.tablescroll, 2000)


    }

    componentWillUnmount() {
        clearInterval(this.SecurityAdminTableScroll)
    }
    tablescroll = (parent, sons) => {




        $(".SecurityAdminTableScrollBox", function () {
            //把顶部的边界清零
            $(".SecurityAdminTableScrollBox  .SecurityAdminTableScroll:first").before($(".SecurityAdminTableScrollBox  .SecurityAdminTableScroll:last"));

        })

        $(".SecurityAdminTableScrollBox .SecurityAdminTableScroll").css("border-right", "none");
        $(".SecurityAdminTableScrollBox .SecurityAdminTableScroll:last").css("border-right", "4px solid aqua");
        $(".GridTableScrollBox", function () {
            //把顶部的边界清零
            $(".GridTableScrollBox  .GridTableScroll:first").before($(".GridTableScrollBox  .GridTableScroll:last"));
        })

        $(".GridTableScrollBox .GridTableScroll").css("border-right", "none");
        $(".GridTableScrollBox .GridTableScroll:last").css("border-right", "4px solid aqua");
        $(".AreaAdminTableScrollBox", function () {
            //把顶部的边界清零
            $(".AreaAdminTableScrollBox  .AreaAdminTableScroll:first").before($(".AreaAdminTableScrollBox  .AreaAdminTableScroll:last"));
        })

        $(".AreaAdminTableScrollBox .AreaAdminTableScroll").css("border-right", "none");
        $(".AreaAdminTableScrollBox .AreaAdminTableScroll:last").css("border-right", "4px solid aqua");

    }



    refreshdata() {
        this.setState({
            tableLoading: true
        });

        getGridAllAdminApi(this.state.schoolId)
            .then((res) => {



                // this.setState({
                //     AreaAdminTableData: res.data
                // })
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        //test 获取新的数据
            getGridAllAdminApi2(this.state.schoolId)
            .then((res) => {
                res.data.map((item)=>{
                switch(item.grlevel){
                    case 1:
                        item.identity='一级网格长';
                        break;
                    case 2:
                        item.identity='二级网格长';
                        break;
                    case 3:
                        item.identity='三级网格长';
                        break;
                    case 4:
                        item.identity='四级网格长';
                        break;
                }
                
                })
                console.log("=============");
            console.log(res.data);

                this.setState({
                    AreaAdminTableData: res.data
                })
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
            //获取echarts数据集
        // getEchartsGridByGridparentIdApi(this.state.schoolId)
        // .then((res) => {
        //     let chartData = []
        //     console.log(res.data)
        //     chartData.push({
        //         name: '总网格长:胡信',
        //         value: '15988133493',
        //         children: res.data
        //     })
        //     console.log("44"+chartData[0].name);
        //     console.log("zsy=============");
        //     console.log(res.data);

        //     this.setState({
        //         chartData: chartData,
        //         // chartLoading: false
        //     })
        // });
        //获取班组信息
            getMatrixEchartsinspectAndpatrolandSecurityApi(this.state.schoolId)
            .then((res)=>{
               // console.log("666", res.data)
                this.setState({
                    chartData3:res.data,
                    chartLoading1:false
                })
            })
        //获取矩阵树状图数据集
        getMatrixEchartsGridByGridparentIdApi(this.state.schoolId, 0)
        .then((res)=>{
            let chartData =[]
            chartData.push({
                name:'总网格长',
                value:4,
                children:res.data
            })
            this.setState({
                chartData2:chartData,
                chartLoading: false
            })
        })
        //网格员类型占比
        getGridNumApi(this.state.schoolId)
            .then((res) => {

                let legends = ['一级网格数', '二级网格数', '三级网格数']
                let data = [
                    {
                        name: '一级网格数',
                        value: res.data.gridFirstNum,
                        unit: '个'
                    },
                    {
                        name: '二级网格数',
                        value: res.data.gridSecondNum,
                        unit: '个'
                    },
                    {
                        name: '三级网格数',
                        value: res.data.gridThirdNum,
                        unit: '个'
                    }]


                this.setState({
                    chartDataInnerGrider: {
                        legends: legends,
                        data: data
                    },

                });



            })

            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });


        //闸机出入信息

        attendanceUserInformationApi(this.state.schoolId)
            .then((res) => {


                let resData = res.data.InspectClassWorkload
                this.setState({
                    griderTableData: resData

                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });


        //安全隐患负责人信息
        getGridOutAdminForSecurityAdminApi(this.state.schoolId)
            .then((res) => {


                let resData = res.data
                this.setState({
                    SecurityAdminTableData: resData

                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });


        //学生街道分布        
        getAreaSpecialStudentsDistributeApi(this.state.schoolId)
            .then((res) => {



                let legends = [];
                let data = [];
                let data1 = []

                res.data.map((item, index) => {

                    legends.push(item.street)
                    data.push({
                        name: item.street,
                        value: item.areaSpecialStudent,
                        unit: '人'
                    })
                    data1.push(
                        item.areaStudent)
                })

                this.setState({
                    chartDataStuStreet: {
                        legends: legends,
                        data: data
                    },
                    chartDataSpecialStuStreet: {
                        xdata: legends,
                        ydata: data1
                    }
                });

            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });







    }
    render() {

        let img = new Image()
        img.src = 'https://tidukeji.cn/image/screenGrid/' + this.state.schoolId + '.png'
            ;
        let schoolGridIng = 'https://tidukeji.cn/image/screenGrid/' + this.state.schoolId + '.png'


        return (
            <div className='screen_center'>
                {/* <div className='screen_BgImg_top' >
                    <Row xs={24} sm={24} md={24} lg={24} xl={24}>
                        <PageTitle title='校内网格' schoolName={this.state.schoolName} />
                        <ScreenNav navdata={{
                            schoolId: this.state.schoolId,
                            schoolName: this.state.schoolName,
                            module: this.state.module,
                            mapType: this.state.mapType,
                            history: this.props.history
                        }} />
                    </Row>


                </div> */}

                <div className="screen_main_center" >
                    <div className="screen_margin">


                        <Row gutter={[16, 24]}>

                            <Col span={7}>
                                <div className='  scrennCenterB'>
                                    <div className="templeate_bg scrennCenterC">
                                        <TempleateTitle title="校内网格长" />
                                        {
                                            this.state.AreaAdminTableData.length == 0

                                                ?
                                                (
                                                    <Empty
                                                        style={{
                                                            marginTop: 200,
                                                        }} />
                                                ) :
                                                (

                                                    <ul className="screen_table AreaAdminTableScrollBox">
                                                        <li className='screen_table_th'>
                                                            <span>网格名称</span>
                                                            <span>网格长</span>
                                                            <span>网格等级</span>

                                                        </li>
                                                        {
                                                            this.state.AreaAdminTableData ? this.state.AreaAdminTableData.map((item) => <li className="AreaAdminTableScroll">
                                                                <span>{item.gridName ? item.gridName : "未配置"}</span>
                                                                <span>{item.gridAdmin ? item.gridAdmin : "未配置"}</span>
                                                                <span>{item.identity ? item.identity : "未配置"}</span>
                                                            </li>) : <li>
                                                                <span>暂无数据</span>
                                                                <span>暂无数据</span>
                                                                <span>暂无数据</span>
                                                            </li>
                                                        }
                                                    </ul>
                                                )
                                        }


                                    </div>

                                    <div className="templeate_bg scrennCenterC">
                                        <TempleateTitle title="安全隐患负责人" />
                                        <ul className="screen_table SecurityAdminTableScrollBox">
                                            <li className='screen_table_th'>
                                                <span>安全类别</span>
                                                <span>负责人</span>
                                                <span>联系方式</span>

                                            </li>
                                            {
                                                this.state.SecurityAdminTableData ? this.state.SecurityAdminTableData.map((item) => <li className="SecurityAdminTableScroll">
                                                    <span>{item.category ? item.category : "未配置"}</span>
                                                    <span>{item.wgAdmin ? item.wgAdmin : "未配置"}</span>
                                                    <span>{item.wgphone ? item.wgphone : '未配置'}</span>
                                                </li>) : <li>
                                                    <span>暂无数据</span>
                                                    <span>暂无数据</span>
                                                    <span>暂无数据</span>
                                                </li>
                                            }
                                        </ul>
                                    </div>
                                </div>
                            </Col>
                            <Col span={10}>    <div className=' scrennCenterB'>

                                <div className='gridimg_box'>
                                    <TempleateTitle title="校内网格划分图" size="large" />
                                    {
                                        this.state.AreaAdminTableData.length != 0 ?
                                        (
                                            // <TabPane tab="图表" key="2">
                                                <div style={{
                                                    marginBottom: 16,
                                                    padding: 16,
                                                    width: '100%',
                                                    height: '100%',
                                                    border: '1px solid',
                                                    borderColor: '#000000'
                                                }}>
                                                    <Skeleton loading={this.state.chartLoading} active>
                                                        {/* <BigScreenChartGridInfo
                                                            that={this}
                                                            chartData={this.state.chartData}
                                                            test={this.state.test}
                                                        /> */}
                                                        <MatrixTree
                                                        that={this}
                                                        chartData={this.state.chartData2}
                                                        test={this.state.test}/>
                                                        {/* <MatrixTree1
                                                        that={this}
                                                        chartData={this.state.chartData3}
                                                        /> */}
                                                    </Skeleton>
                                                </div>
                                           // </TabPane>
                                        ):
                                        
                                        (
                                            // <TabPane tab="图表" key="2">
                                            <div style={{
                                                marginBottom: 16,
                                                padding: 16,
                                                width: '100%',
                                                height: '100%',
                                                border: '1px solid',
                                                borderColor: '#000000'
                                            }}>
                                                <Skeleton loading={this.state.chartLoading1} active>
                                                    {/* <BigScreenChartGridInfo
                                                        that={this}
                                                        chartData={this.state.chartData}
                                                        test={this.state.test}
                                                    /> */}
                                                    {/* <MatrixTree
                                                    that={this}
                                                    chartData={this.state.chartData2}
                                                    test={this.state.test}/> */}
                                                    <MatrixTree1
                                                    that={this}
                                                    chartData={this.state.chartData3}
                                                    />
                                                </Skeleton>
                                            </div>
                                       // </TabPane>
                                            )
                                        
                                    }
                                    
                                    
                                </div>
                            </div>

                            </Col>
                            <Col span={7}>    <div className=' scrennCenterB'>





                                <div className="templeate_bg scrennCenterC">

                                    <TempleateTitle title="校内网格管理分布" />
                                    {
                                        this.state.chartDataInnerGrider.legends.length == 0

                                            ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) :
                                            (
                                                <BluePie
                                                    chartData={this.state.chartDataInnerGrider}
                                                    that={this}
                                                    labelshow="true"
                                                    divId={'innerGrider'}

                                                    fullScreenShow={true}
                                                />
                                            )
                                    }
                                </div>
                                <div className=" templeate_bg scrennCenterC">

                                    {/* <TempleateTitle title="校内网格管理员信息" />
                                    <ul className="screen_table GridTableScrollBox">
                                        <li className='screen_table_th'>
                                            <span>网格区</span>
                                            <span>一级网格长</span>
                                            <span>二级网格长</span>

                                        </li>
                                        {
                                            this.state.griderTableData ? this.state.griderTableData.map((item) => <li className="GridTableScroll">
                                                <span>{item.gridName}</span>
                                                <span>{item.gridFirstAdmin}</span>
                                                <span>{item.gridSecondAdmin}</span>
                                            </li>) : <li>
                                                    <span>暂无数据</span>
                                                    <span>暂无数据</span>
                                                    <span>暂无数据</span>
                                                </li>
                                        }
                                    </ul> */}

                                    <TempleateTitle title="今日闸机出入情况" />
                                    {
                                        this.state.griderTableData.length == 0

                                            ?
                                            (
                                                <Empty
                                                    style={{
                                                        marginTop: 200,
                                                    }} />
                                            ) : (<ul className="screen_table GridTableScrollBox">
                                                <li className='screen_table_th'>
                                                    <span>姓名</span>
                                                    <span>进校|出校</span>
                                                    <span>时间</span>

                                                </li>
                                                {
                                                    this.state.griderTableData ? this.state.griderTableData.map((item) => <li className="GridTableScroll">
                                                        <span>{item.name}</span>
                                                        <span>{item.inoroutstaus == "in" ? "进校" : "出校"}</span>
                                                        <span>{item.time}</span>


                                                    </li>) : <li>
                                                        <span>暂无数据</span>
                                                        <span>暂无数据</span>
                                                        <span>暂无数据</span>
                                                    </li>
                                                }
                                            </ul>
                                            )}
                                </div>


                            </div>
                            </Col>
                        </Row>
                    </div>

                </div></div>

        )
    }

}



//导航
function ScreenNav(props) {


    console.log("encodeUnicode(props.navdata.schoolName)==========", encodeUnicode(props.navdata.schoolName))
    let arr = props.navdata.module.indexOf(',') == -1 ? [props.navdata.module] : props.navdata.module.split(',')
    let edu = []

    // let path = props.navdata.schoolId+'/'+encodeURI(encodeURI(props.navdata.schoolName))+'/'+props.navdata.mapType+'/'+encodeURI(encodeURI(props.navdata.module))
    // let path = props.navdata.schoolId + '/' + props.navdata.schoolName + '/' + props.navdata.mapType
    //     + '/' + props.navdata.module + '/' + props.navdata.origin
    let path = props.navdata.schoolId + '/' + props.navdata.mapType

    if (props.navdata.origin.indexOf('edu') != -1) {

        edu = props.navdata.origin.split('&')
    }
    console.log("当前路径", props);
    console.log("arr数组")
    console.log(arr);
    return <div className="screen_nav" >
        <ul id="screenNavlist">
            {
                arr.map((item, index) =>
                    <li className="screen_nav_button ">
                        <NavLink className="screen_nav_link" to={'/bigscreen' + map[item] + path} className="nav_link" activeClassName="active" activeStyle={{ width: "100%", height: '100%', color: '#fff', fontSize: 18, borderBottom: "2px solid #44bbd0" }}>

                            {item}</NavLink ></li>
                )
            }


            {edu.length > 1 ?

                <li className="screen_nav_button">

                    {/* <NavLink className="screen_nav_link" to={'/edubigscreen/' + edu[1] + "/" + edu[2] + "/" + 0} className="nav_link" activeClassName="active" activeStyle={{ width: "100%", height: '100%', color: '#fff', fontSize: 18, borderBottom: "2px solid #44bbd0" }}>

                        返回</NavLink > */}

                    <NavLink className="screen_nav_link" to={'/edubigscreen/' + edu[1] + "/" + edu[2] + "/" + 1} className="nav_link" activeClassName="active" activeStyle={{ width: "100%", height: '100%', color: '#fff', fontSize: 18, borderBottom: "2px solid #44bbd0" }}>

                        返回</NavLink >
                </li> : null
            }




        </ul>



    </div>
}
//页面标题
function PageTitle(props) {

    return (
        <div className='page_title'>{props.schoolName}
            {/* {props.title} */}
            师生安全网格
        </div>

    )
}
//模块标题
function TempleateTitle(props) {
    if (props.size == "large") {

        if (props.subtitle == 'true') {

            return (
                <div className='rol12_screen_templeate_title'>{props.title}<span className="screen_templeate_subtitle">{props.finish}</span></div>
            )
        }

        return (
            <div className='rol12_screen_templeate_title'>{props.title}</div>
        )
    }
    else {
        if (props.subtitle == 'true') {

            return (
                <div className='screen_templeate_title'>{props.title}<span className="screen_templeate_subtitle">{props.finish}</span></div>
            )
        }
        return (
            <div className='screen_templeate_title'>{props.title}</div>
        )
    }

}

//数据统计展示块竖版
function DataShow(props) {


    return (
        <div className="dataflex">{
            Object.keys(props.data).map(key => <div><div><span>{key}</span> <span >{props.data[key]}</span></div></div>
            )}





        </div>
    )

}
//数据统计展示块横板
function DataShowB(props) {


    return (

        <ul className="dataflexB" >{



            Object.keys(props.data).map(key => <li className="dataflexBLi"><div><span>{key}</span> <span>{props.data[key]}</span></div></li>
            )}


        </ul>


    )

}

//无数据时
function Empty() {
    return (
        <div className='screen_empty'>
            暂无数据
        </div>
    )
}

function Empty1() {
    return (
        <div className='screen_empty1'>
            暂无数据
        </div>
    )
}

//巡更日历
class ChartCalendar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData.chartData || [],
            monthList: props.chartData.monthList || [],
            chart: null,
            real: [],
            ChartCalendarId: null,
            should: [],
            pieRadius: props.pieRadius,
            cellSize: props.cellSize,
            optionData: [],

            dayList: [],
            that: props.that,
            option: {},
            divId: props.divId,
            fullScreenShow: props.fullScreenShow,
        };

    }
    handleSetTime = (chart, option) => {
        option.series = this.getPieSeries(chart)


        chart.setOption(option)




    }

    handleKeyDown = (e) => {


        console.log("事件", e.keyCode);
        if (e.keyCode === 122) {
            console.log("按下了Enter键")
            window.location.reload();
        }
    }
    componentDidMount() {

        var ChartCalendarId = echarts.init(document.getElementById('screen_chartCalendar'));

        document.addEventListener('keydown', this.handleKeyDown);



        //获取scatter的data,用于左上角,日的显示
        var scatterData = this.getScatterDate();

        if (scatterData.length) {
            //series的数据初始设置scatter



            var color2 = '#edebf3';
            let option = {

                legend: {
                    data: ['已巡', '未巡'],
                    left: "2%",
                    top: 20,
                    textStyle: {
                        color: color2,
                    }
                },
                calendar: { //日历坐标
                    top: '20%',
                    bottom: '18%',
                    left: 'center',
                    orient: 'vertical',
                    cellSize: [90, 'auto'],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "transparent"
                        }
                    },
                    yearLabel: {
                        show: false,
                        textStyle: {
                            fontSize: 30
                        }
                    },
                    dayLabel: {
                        margin: 20,
                        firstDay: 1,
                        nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        color: "#ffffff",
                        fontSize: 18,

                    },
                    monthLabel: {
                        show: false
                    },
                    range: [this.state.monthList],
                    itemStyle: {
                        color: "#051A4A",
                        borderColor: '#1C4952',
                        borderWidth: 1
                    }
                },

            };

            this.setState({
                option: option,
                ChartCalendarId: ChartCalendarId
            })
            ChartCalendarId.setOption(option)

            let that = this





            this.handleSetTime(ChartCalendarId, option)
        }



    }

    componentWillUnmount() {
        document.removeEventListener('keydown', this.handleKeyDown);

    }
    //series后续设置pie
    getPieSeries = (ChartCalendarId) => {


        let that = this

        var scatterData = this.getScatterDate();
        let seriesData = [{ //日期
            id: 'label',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
                normal: {
                    show: true,

                    symbolSize: 1,
                    label: {
                        show: true,
                        formatter: function (params) {
                            return echarts.format.formatTime('dd', params.value[0]);
                        }
                    },
                    offset: [-35, -18],
                    formatter: function (params) {
                        return params.value[1]
                    },

                    // textStyle: {
                    //     color: color2,
                    //     fontSize: 14
                    // }
                }
            },
            data: scatterData
        }]

        scatterData.map(function (item, index) {
            //转换坐标系上的点到像素坐标值,转换的结果为像素坐标值
            var center = ChartCalendarId.convertToPixel('calendar', item);
            let seriesItem = {
                id: index + 'pie',
                type: 'pie',
                center: center,
                label: {
                    normal: {
                        formatter: '{c}',
                        position: 'inside'
                    }
                },
                radius: 22,
                data: [
                    {
                        name: '已巡',
                        value: that.state.chartData.real[index],

                        itemStyle: {
                            color: 'rgba(1,191,198,1)'
                        },
                    },
                    {
                        name: '未巡',
                        value: that.state.chartData.should[index] - that.state.chartData.real[index],
                        itemStyle: {
                            color: '#FDDD60'
                        }
                    },


                ]
            };
            seriesData.push(seriesItem)
        })
        return seriesData
    }
    getScatterDate() {

        var data = [];

        let date = this.state.chartData.date
        for (let i = 0; i < date.length; i++) {

            data.push([
                echarts.format.formatTime('yyyy-MM-dd', date[i]),
                echarts.format.formatTime('dd', date[i])
            ]);
        }
        return data;
    }
    getPieSeriesUpdate(scatterData, ChartCalendarId) {


        return scatterData.map(function (item, index) {
            var center = ChartCalendarId.convertToPixel('calendar', item);
            return {
                id: index + 'pie',
                center: center
            };
        });
    }
    render() {

        return (<div id={this.state.divId} className="screenEcharts" ></div>)
    }
}
//巡更时钟

class TimerEcharts extends Component {
    constructor(props) {
        super(props)

        this.state = {
            chartData: props.chartData || [],
            that: props.that,
            divId: props.divId,
            listers: props.listers

        }
    }
    componentWillReceiveProps() {


        this.setState(
            {
                chartData: this.props.chartData || [],
                that: this.props.that,
                divId: this.props.divId,

            }

        )


    }
    componentDidMount() {
        this.refreshdata()

    }

    refreshdata() {
        if (this.state.chartData.length) {
            var chart = echarts.init(document.getElementById(this.state.divId));


            let option = {

                tooltip: {
                    trigger: 'item',
                    position: ['48.5%', '49.2%'],
                    backgroundColor: 'rgba(50,50,50,0)',
                    textStyle: {
                        color: 'yellow',
                        fontWeight: 'bold'
                    },
                    formatter: "{c}"
                },

                series: [
                    {
                        name: '巡更工作24小时分布',
                        type: 'pie',
                        radius: ['5%', '55%'],
                        roseType: 'area',
                        color: ['#01BFC6'],
                        data: this.state.chartData,
                        labelLine: {
                            normal: {
                                show: false,

                            }
                        },
                        label: {
                            normal: {
                                show: false,

                            }
                        },
                        itemStyle: {
                            normal: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: '#01BFC6'
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '',
                        type: 'gauge',
                        min: 0,
                        max: 24,
                        interval: 1,
                        startAngle: 90,
                        endAngle: 449.9,
                        radius: '80%',
                        splitNumber: 12,
                        clockwise: false,
                        animation: false,
                        zlevel: 11,

                        axisLabel: {
                            show: true,
                            interval: 1,
                            formatter: function (v) {
                                return v ? v : '';
                            },
                            distance: 5,
                            textStyle: {
                                color: "#76B2DB",
                                fontWeight: 400,
                                fontSize: 16
                            }
                        },
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#fff'
                            },
                            interval: 1,
                        },
                        splitLine: {
                            show: true,
                            distance: 5,
                            splitNumbe: 5,
                            lineStyle: {
                                color: "#fff"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [0, '#00BBFE'],
                                    [0.25, '#00BBFE'],
                                    [0.75, '#00BBFE'],
                                    [1, '#00BBFE']
                                ],
                                width: 5,
                                shadowColor: '#01ABEC', //默认透明
                                shadowBlur: 10,
                                opacity: 1
                            }
                        },

                    },
                    {
                        name: '',
                        type: 'gauge',
                        min: 0,
                        max: 24,
                        startAngle: 90,
                        endAngle: 449.9,
                        radius: '84%',
                        splitNumber: 24,
                        clockwise: false,
                        animation: false,
                        detail: {
                            show: false,
                            formatter: '{value}',
                            textStyle: {
                                color: '#01BFC6'
                            }
                        },

                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#fff'
                            },
                            interval: 1,
                        },
                        axisLine: {

                            lineStyle: {
                                color: [
                                    [1, '#0C2E60']
                                ],
                                width: '10%',
                                opacity: 0.8
                            }
                        },


                        itemStyle: {
                            normal: {
                                color: 'green',
                                width: 2,
                                borderWidth: 3,
                            }
                        }
                    },

                    {
                        name: '',
                        type: 'gauge',

                        startAngle: 90,
                        endAngle: 449.9,
                        radius: '50%',
                        clockwise: false,
                        animation: false,
                        detail: {
                            show: false,
                            formatter: '{value}',
                            textStyle: {
                                color: '#01BFC6'
                            }
                        },

                        axisLabel: {
                            show: false
                        }
                        ,

                        axisLine: {

                            lineStyle: {
                                color: [
                                    [1, '#000000']
                                ],
                                width: '10%',
                                opacity: 0.8
                            }
                        },


                    },
                    {
                        name: '',
                        type: 'gauge',
                        min: 0,
                        max: 24,
                        startAngle: 90,
                        endAngle: 449.9,
                        radius: '70%',
                        splitNumber: 24,
                        clockwise: false,
                        animation: false,
                        detail: {
                            show: false,
                            formatter: '{value}',
                            textStyle: {
                                color: '#01BFC6'
                            }
                        },

                        axisTick: {
                            show: false
                        },
                        axisLine: {

                            lineStyle: {
                                color: [
                                    [1, '#0A3F73']
                                ],
                                width: '10%',
                                opacity: 0.8
                            }
                        },

                        axisLabel: {
                            show: false,
                            formatter: function (v) {
                                return v ? v : '';
                            },
                            textStyle: {

                                color: 'yellow',
                                fontWeight: 'bold',

                                fontSize: 16
                            }
                        },

                    },
                ]
            };
            chart.setOption(option);


        }

    }
    render() {

        return (
            <div id={this.state.divId} style={{ width: "100%", height: "90%" }}>

            </div>
        )
    }
}

//巡更三角几何形状排名

class TrianglrEcharts extends Component {
    constructor(props) {
        super(props)

        this.state = {
            name: props.chartData.name || [],
            count: props.chartData.count || [],
            that: props.that,
            divId: props.divId,
            listers: props.listers


        }
    }

    componentDidMount() {


        if (this.state.name.length) {
            var chart = echarts.init(document.getElementById(this.state.divId));

            const CubeLeft = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function (ctx, shape) {
                    // 会canvas的应该都能看得懂，shape是从custom传入的
                    const xAxisPoint = shape.xAxisPoint
                    // console.log(shape)
                    const c0 = [shape.x + 17, shape.y]
                    const c1 = [shape.x - 23, shape.y - 6]
                    const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13]
                    const c3 = [xAxisPoint[0] + 17, xAxisPoint[1]]
                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
                }
            })
            // 绘制右侧面
            const CubeRight = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint
                    const c1 = [shape.x + 17, shape.y]
                    const c2 = [xAxisPoint[0] + 17, xAxisPoint[1]]
                    const c3 = [xAxisPoint[0] + 35, xAxisPoint[1] - 15]
                    const c4 = [shape.x + 35, shape.y - 15]
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                }
            })
            // 绘制顶面
            const CubeTop = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x + 17, shape.y]
                    const c2 = [shape.x + 35, shape.y - 15] //右点
                    const c3 = [shape.x - 5, shape.y - 20]
                    const c4 = [shape.x - 23, shape.y - 6]
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                }
            })
            // 注册三个面图形
            echarts.graphic.registerShape('CubeLeft', CubeLeft)
            echarts.graphic.registerShape('CubeRight', CubeRight)
            echarts.graphic.registerShape('CubeTop', CubeTop)




            let option = {


                grid: {
                    left: '10%',
                    right: '10%',
                    top: '15%',
                    bottom: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.state.name,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    axisTick: {
                        show: false,
                        length: 9,
                        alignWithLabel: true,
                        lineStyle: {
                            color: '#7DFFFD'
                        }
                    },
                    axisLabel: {
                        fontSize: 20
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 16
                    },
                    boundaryGap: ['20%', '20%']
                },
                series: [{
                    type: 'custom',
                    renderItem: (params, api) => {
                        const location = api.coord([api.value(0), api.value(1)])
                        return {
                            type: 'group',
                            children: [{
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#1BC9F1'
                                    },
                                    {
                                        offset: 1,
                                        color: '#1C7084'
                                    }
                                    ])
                                }
                            }, {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#1C7287'
                                    },
                                    {
                                        offset: 1,
                                        color: '#1BC3EB'
                                    }
                                    ])
                                }
                            }, {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#06728A'
                                    },
                                    {
                                        offset: 1,
                                        color: '#06728A'
                                    }
                                    ])
                                }
                            }]
                        }
                    },
                    data: this.state.count
                }, {
                    type: 'bar',

                    itemStyle: {
                        color: 'transparent'
                    },
                    tooltip: {

                    },
                    data: this.state.count
                }]
            }
            chart.setOption(option)
        }
    }

    render() {


        return (
            <div id={this.state.divId} className="screenEcharts" >

            </div>
        )
    }
}

//横向柱状图准确率排名
class PercentageRankBar extends Component {

    constructor(props) {
        super(props)

        this.state = {
            name: props.chartData.name || [],
            rate: props.chartData.rate || [],
            that: props.that,
            divId: props.divId,
            listers: props.listers


        }
    }
    componentDidMount() {


        this.refreshdata()


    }
    refreshdata() {



        if (this.state.name.length) {
            var chart = echarts.init(document.getElementById(this.state.divId));

            let option = {   
                textStyle: {
                    fontSize: 16,
                    
                },
                tooltip: {
                    show: true,
                    formatter: '{b}</br>{c}%'
                },
                grid: {
                    top: "3%",
                    left: "2%",
                    right: "10%",
                    bottom: "13%",
                    containLabel: true
                },
                xAxis: {
                    show: false
                },
                yAxis: [{
                    show: true,
                    data: this.state.name,
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        margin: 10,
                        width: 100,
                        overflow: "truncate",
                        color: '#f9f1fa',
                        textStyle: {
                            fontSize: 16,
                        },

                    },


                }],
                series: [
                    {
                        type: 'bar',
                        yAxisIndex: 0,
                        data: this.state.rate,
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#248ff7',
                                }, {
                                    offset: 1,
                                    color: '#14AEEA'
                                }]),
                                barBorderRadius: 30,
                               
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                color: '#fff',
                                position: 'right',
                                formatter: '{c}%'
                            }
                        },
                    }]
            };
            chart.setOption(option);
        }

    }
    render() {


        return (
            <div id={this.state.divId} className="screenEcharts">

            </div>)


    }


}

//带时间轴柱状图
class TimeBar extends Component {
    constructor(props) {
        super(props)

        this.state = {
            times: props.chartData.times || [],
            date: props.chartData.date || [],
            that: props.that,
            divId: props.divId,
            listers: props.listers


        }
    }

    componentDidMount() {

        this.refreshdata()

    }

    refreshdata() {

        if (this.state.times.length) {
            var chart = echarts.init(document.getElementById(this.state.divId));

            let option = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '20%',
                    top: '16%',
                    containLabel: true
                },
                legend: {
                    data: ['巡检次数'],
                    right: '5%',
                    top: 12,
                    textStyle: {
                        color: "#fff",
                        fontSize: 16,
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                },
                xAxis: {
                    type: 'category',
                    data: this.state.date,
                    axisLine: {
                        lineStyle: {
                            color: 'white'

                        }
                    },
                    axisLabel: {
                        // interval: 0,
                        // rotate: 40,
                        textStyle: {
                            fontSize: 16,
                            fontFamily: 'Microsoft YaHei'
                        }
                    },
                },

                yAxis: {
                    type: 'value',
                    // max: '100',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                    axisLabel: {
                        show: false
                    }
                },
                "dataZoom": [{
                    "show": false,
                    "height": 12,
                    "xAxisIndex": [
                        0
                    ],
                    bottom: '8%',
                    "start": 65,
                    "end": 95,
                    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                    handleSize: '110%',
                    handleStyle: {
                        color: "#d3dee5",

                    },
                    textStyle: {
                        color: '#f9f1fa'
                    },
                    borderColor: "#90979c"
                }, {
                    "type": "inside",
                    "show": true,
                    "height": 15,
                    "start": 1,
                    "end": 35
                }],
                series: [

                    {
                        name: '巡检次数',
                        type: 'bar',
                        barWidth: '45%',
                        label: {
                            show: false,
                            position: 'inside',
                            textStyle: {
                                color: '#f9f1fa',
                                fontSize: 16,
                                fontWeight: "bolder",

                                formatter: '{c}次'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#248ff7',




                                }, {
                                    offset: 1,
                                    color: '#14AEEA'
                                }]),
                                barBorderRadius: 11,
                            }
                        },
                        data: this.state.times
                    }
                ]
            };
            chart.setOption(option)

        }

    }
    render() {

        return (
            <div id={this.state.divId} className="screenEcharts" >

            </div>)


    }




}
//蓝环饼状图
class BluePie extends Component {
    constructor(props) {
        super(props)

        this.state = {
            data: props.chartData.data || [],
            labelshow: props.labelshow,
            legends: props.chartData.legends || [],
            that: props.that,
            divId: props.divId,
        }
    }

    componentDidMount() {
        this.refreshdata()

    }
    refreshdata() {



        let thie = this
        if (this.state.legends.length) {


            let chart = echarts.init(document.getElementById(this.state.divId));

            var option = {
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '20%',
                    top: '6%',
                    containLabel: true
                },
                legend: {
                    type: "scroll",
                    // orient: 'horizontal',
                    // orient: 'vertical',
                    icon: 'circle',
                    top: '70%',
                    left: 'center',
                    align: 'auto',
                    textStyle: {
                        color: 'aqua',
                        fontSize: 16
                    },
                    fontSize: 16,
                    data: this.state.legends,
                    formatter: function (name) {
                        let res = thie.state.data.filter(v => v.name === name);
                        res = res[0] || {};
                        let unit = res.unit || '';
                        if (thie.state.data[0].rate) {
                            return ` ${name}: ${(res.rate * 100).toFixed(0)}%`
                        }
                        else return ` ${name}: ${res.value}${unit} `
                    },

                },
                series: [{
                    type: 'pie',
                    center: ['50%', '35%'],
                    radius: ['30%', '55%'],
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    label: {

                        position: [-5, -5],
                        normal: {
                            show: true,
                            position: "inside",

                            color: "#fff",
                            formatter: '{c}',
                            fontSize: 16,
                            rich: {
                                name: {
                                    fontSize: 16,
                                    lineHeight: 20,
                                    color: "#fff",
                                },
                                value: {
                                    fontSize: 16,
                                    lineHeight: 20,
                                    color: "#fff"
                                },
                                unit: {
                                    fontSize: 16,
                                    lineHeight: 20,
                                    color: "#fff",
                                    padding: [0, 0, 5 * scale, 0]
                                }
                            }
                        },
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: this.state.data
                }]
            };

            chart.setOption(option)



        }
    }


    render() {

        return (
            <div id={this.state.divId} className="screenEcharts" >

            </div>)


    }

}
//竖向双实例Bar
class StreetBar extends Component {
    constructor(props) {
        super(props)

        this.state = {
            xdata: props.chartData.xdata || [],
            ydata: props.chartData.ydata || [],
            that: props.that,
            divId: props.divId,
        }
    }

    componentDidMount() {
        this.refreshdata()
    }
    refreshdata() {

        let chart = echarts.init(document.getElementById(this.state.divId));
        let option = {

            color: ['#4fd7fd', "#ed9d3c"],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                selectedMode: false, //取消图例上的点击事件
                data: ["特殊类型"],
                textStyle: {
                    fontSize: '16',
                    color: '#fff'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '13%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.state.xdata,
                    axisLabel: {
                        rotate: 45, //斜体字可不用
                        textStyle: {
                            fontSize: '16',
                            color: '#fff'
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // minInterval: 100, //设置左侧Y轴最小刻度
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(135,140,147,0.8)'
                        }
                    }, //设置横线样式
                    axisLabel: {
                        show: true,

                        textStyle: {
                            fontSize: '16',
                            color: '#fff'
                        }
                    },
                }
            ],

            series: [
                //   {
                //     name:'四特人数',
                //     type:'bar',
                //     stack: '排名',
                //     data:this.state.ydata,
                //     barWidth:10
                //   },
                {
                    name: '总人数',
                    type: 'bar',
                    stack: '排名',
                    data: this.state.ydata,
                    barWidth: 20,
                    itemStyle: {
                        show: true,
                        position: 'top',
                        normal: {
                            barBorderRadius: [30, 30, 0, 0, 0],

                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            fontSize: '16',
                            color: '#fff'
                        }
                    },

                },
            ]
        };
        chart.setOption(option)
    }

    render() {

        return (
            <div id={this.state.divId} className="screenEcharts" >

            </div>)


    }


}





// 懒加载优化：滚动节流策略
var __SCROLLTIMER__ = null

// 重新设置 echarts 的宽高
var resizeEcharts = () => {
    $('.screenEcharts').each((i, e) => {
        echarts.getInstanceByDom(e).resize()
    })
}

// 绑定事件
window.onresize = function () {
    clearTimeout(__SCROLLTIMER__);
    __SCROLLTIMER__ = setTimeout(resizeEcharts, 150);
}
//轮播通知框
class LunBoNotice extends Component {
    constructor(props) {
        super(props)

        this.state = {

            data: props.data || [],
            that: props.that,
            LBdivId: props.divId,


        }
    }
    componentDidMount() {
        this.safetyNotice = setInterval(this.TaskSafetyNotice, 2000);

    }

    componentWillUnmount = () => {
        clearInterval(this.safetyNotice);
    }

    TaskSafetyNotice = () => {
        $(".LB_scroll_box", function () {
            //把顶部的边界清零
            $(".LB_scroll_box .LB_scroll:first").before($(".LB_scroll_box .LB_scroll:last")); //在第一个新闻后面插入最后一个新闻
        })

    }





    render() {
        return (
            <div id={this.props.LBdivId} >
                <div ref='LbNoticeUI ' className='LB_scroll_box'>
                    {
                        this.props.data.map((item) => <div className='LB_scroll noticeItem clearfix'>


                            <span style={{ float: 'left' }}>    {item.createTime}</span><span style={{ float: 'right' }}>{item.exceptionType}</span>
                            <div className="safetyContent"> {item.address}{item.content}</div>
                        </div>
                        )
                    }
                </div>


            </div>
        )
    }
}


//无缝滚动表格
class EditableTable extends React.Component {
    constructor(props) {
        super(props);

        this.table = null;
        this.tableRef = (ref) => {
            this.table = ref;

        }
    }


    componentDidMount = () => {
        //文字无缝滚动
        this.industryNews = setInterval(this.taskIndustryNews, 50);
    }
    taskIndustryNews = () => {
        if (this.refs.newDiv.scrollTop >= this.refs.newDivUI.offsetHeight - this.refs.newDiv.clientHeight) {
            this.refs.newDiv.scrollTop = 0;
        }
        else {
            this.refs.newDiv.scrollTop += 1;
        }
    }


    handleIndustryNewsEnter = () => {
        clearInterval(this.industryNews);
    }
    handleIndustryNewsLeave = () => {
        this.industryNews = setInterval(this.taskIndustryNews, 50);
    }
    componentWillUnmount = () => {
        clearInterval(this.industryNews);
    }


    render() {

        return (
            <div className='ceShiTable'>
                <div className='ceShiTable-title'>

                    {this.props.titledata && this.props.titledata.length > 0
                        ?
                        this.props.titledata.map(this.tableTitle)
                        : <span className='noData'>暂无数据</span>

                    }

                </div>
                <div
                    ref='newDiv'
                    className='ceShiTable-body'
                    onMouseEnter={this.handleIndustryNewsEnter.bind(this)}
                    onMouseLeave={this.handleIndustryNewsLeave.bind(this)}
                >
                    <ul ref='newDivUI'>
                        {this.props.data && this.props.data.length > 0
                            ?
                            this.props.data.map(this.tableBody)
                            : <span className='noData'>暂无数据</span>

                        }

                    </ul>


                </div>
            </div>
        );
    }
    tableTitle = (item, index) => {
        return <span className='ceShiTable-text2'>{item}</span>
    }

    tableBody = (item, index) => {
        return (
            <li key={index}>
                <span className='ceShiTable-text2'>
                    {item.grade}
                </span>
                <span className='ceShiTable-text2'>
                    {item.studentName}
                </span>
                <span className='ceShiTable-text2'>
                    {item.time}
                </span>
                <span className='ceShiTable-text2'>
                    {item.inorout}
                </span>
            </li>
        );
    }


}
const EditableFormTable = Form.create()(EditableTable);


class EditableTable1 extends React.Component {
    constructor(props) {
        super(props);

        this.table = null;
        this.tableRef = (ref) => {
            this.table = ref;

        }
    }


    componentDidMount = () => {
        //文字无缝滚动
        this.industryNews = setInterval(this.taskIndustryNews, 50);
    }
    taskIndustryNews = () => {
        if (this.refs.newDiv.scrollTop >= this.refs.newDivUI.offsetHeight - this.refs.newDiv.clientHeight) {
            this.refs.newDiv.scrollTop = 0;
        }
        else {
            this.refs.newDiv.scrollTop += 1;
        }
    }


    handleIndustryNewsEnter = () => {
        clearInterval(this.industryNews);
    }
    handleIndustryNewsLeave = () => {
        this.industryNews = setInterval(this.taskIndustryNews, 50);
    }
    componentWillUnmount = () => {
        clearInterval(this.industryNews);
    }


    render() {

        return (
            <div className='ceShiTable'>
                <div className='ceShiTable-title'>

                    {this.props.titledata && this.props.titledata.length > 0
                        ?
                        this.props.titledata.map(this.tableTitle)
                        : <span className='noData'>暂无数据</span>

                    }

                </div>
                <div
                    ref='newDiv'
                    className='ceShiTable-body'
                    onMouseEnter={this.handleIndustryNewsEnter.bind(this)}
                    onMouseLeave={this.handleIndustryNewsLeave.bind(this)}
                >
                    <ul ref='newDivUI'>
                        {this.props.data && this.props.data.length > 0
                            ?
                            this.props.data.map(this.tableBody)
                            : <span className='noData'>暂无数据</span>

                        }

                    </ul>


                </div>
            </div>
        );
    }
    tableTitle = (item, index) => {
        return <span className='ceShiTable-text2'>{item}</span>
    }

    tableBody = (item, index) => {
        return (
            <li key={index}>
                <span className='ceShiTable-text2'>
                    {item.item}
                </span>
                <span className='ceShiTable-text2'>
                    {item.ExceptionTotal}
                </span>
                <span className='ceShiTable-text2'>
                    {item.total}
                </span>
                <span className='ceShiTable-text2'>
                    {item.finished}
                </span>
                <span className='ceShiTable-text2'>
                    {item.realname}
                </span>
            </li>
        );
    }


}
const EditableFormTable1 = Form.create()(EditableTable1);

//玫瑰分布图


class RosePieEcharts extends Component {
    constructor(props) {
        super(props)

        this.state = {
            data: props.chartData || [],

            that: props.that,
            divId: props.divId,
        }
    }

    componentDidMount() {


        this.refreshdata()
    }
    refreshdata() {



        let chart = echarts.init(document.getElementById(this.state.divId));
        let option = {

            grid: {
                bottom: 0,
                top: 10,
                left: "10%",
                right: "1%",

            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} "
            },
            calculable: true,
            series: [{
                name: '面积模式',                    // 图表名称
                type: 'pie',                         // 图表类型
                radius: [40, 90],                 // 图表内外半径大小
                center: ['50%', '50%'],            // 图表位置
                roseType: 'area',
                label: {
                    normal: {
                        show: true,
                        fontSize: 16,

                        formatter: function (params) {

                            return '{white|' + params.name + '}{yellow|' + params.value + '}\n{blue|' + '}';
                        },
                        rich: {
                            yellow: {
                                color: "#fff",
                                fontSize: 16,
                                padding: [0, 2],
                                align: 'center'
                            },
                            white: {
                                color: "#00B9FC",
                                align: 'right',
                                fontSize: 16,

                            },
                            blue: {
                                color: '#49dff0',
                                fontSize: 16,
                                align: 'center'
                            },
                        },



                    },
                },
                data: this.state.data

            }
            ]
        }
        chart.setOption(option);

    }

    render() {

        return (
            <div id={this.state.divId} className="screenEcharts" >

            </div>)


    }
}



class BigScreenSetUp extends Component {
    constructor(props) {
        super(props)
        this.state = {
            checkedValues: [],
            type: 'add',
            roles: [],
            result: [],
            roleoption: [],
            defalutrole: []
        }
    }
    componentWillMount() {
        this.handlefind()
        let departmentId = parseInt(sessionStorage.getItem("departmentId"))
        getDepartmentRoleAndFeaturesApi(departmentId).
            then((res) => {
                let roles = []
                let roleoption = []
                res.data.map((item) => {
                    roleoption.push(item.rolename)
                    roles.push({
                        rolename: item.rolename,
                        Id: item.id
                    })

                })
                this.setState({
                    roles: roles,
                    roleoption: roleoption
                })
            }).catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
            });
    }
    componentDidMount() {

        this.handlefind()


    }

    onChange(checkedValues) {



        this.setState({
            checkedValues: checkedValues
        })


    }
    onRoleChange(roleheckedValues) {

        console.log("roleheckedValues", roleheckedValues);
        this.setState({
            RolecheckedValues: roleheckedValues,
            defalutrole: roleheckedValues
        })
    }
    handlefind() {

        let departmentId = parseInt(sessionStorage.getItem("departmentId"))
        findModuleConfigApi(departmentId).then((res) => {
            if (res.data.result.length != 0) {
                let checkedValues = []
                let checked = res.data.result[0].moduleWatch
                if (checked.indexOf(",") != -1) {
                    checkedValues = checked.split(",")

                }
                else {
                    checkedValues.push(checked)

                }
                let defalutrole = []

                res.data.result.map((item) => {
                    defalutrole.push(item.identityId)

                })
                this.setState({
                    checkedValues: checkedValues,
                    result: res.data.result,
                    defalutrole: defalutrole,
                    type: 'update'

                })

                // arr = checkedValues
            }
            else {
                this.setState({

                    type: 'add'
                })
            }


        }).catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message);
            }
            console.info(e.config)
        });
    }
    handlesubmit() {

        console.log("checkedValues", this.state.checkedValues);
        let identityId = parseInt(sessionStorage.getItem("identityId"));
        let departmentId = parseInt(sessionStorage.getItem("departmentId"))
        let moduleWatch = this.state.checkedValues.join(",")
        sessionStorage.setItem("arr", moduleWatch)
        addModuleConfigApi(identityId, departmentId, moduleWatch).then((res) => {
            console.log(res);


        }).catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message);
            }
            console.info(e.config)
        });
        this.handlefind()

    }
    handleupdate() {



        let departmentId = parseInt(sessionStorage.getItem("departmentId"))
        let moduleWatch = this.state.checkedValues.join(",")
        sessionStorage.setItem("arr", moduleWatch)
        let arr1=sessionStorage.getItem("arr")
        //console.log("zzzz"+arr1);
     
  
        updateModuleConfigApi(departmentId, moduleWatch).then((res) => {
            console.log(res);
            
            info('修改成功')
            console.log("222222"+moduleWatch)
        //     let arr1=sessionStorage.getItem("arr")
        // console.log("zzzz"+arr1);
            this.handlefind()


        }).catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message);
            }
            console.info(e.config)
        });
        this.handlefind()

    }
    handleRolesubmit() {

        this.state.RolecheckedValues.map((item) => {
            let departmentId = parseInt(sessionStorage.getItem("departmentId"))
            let moduleWatch = this.state.checkedValues.join(",")
            addModuleConfigApi(item, departmentId, moduleWatch).then((res) => {
                // console.log(res);

                info('提交成功')
                this.handlefind()
                
            }).catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message);
                }
                console.info(e.config)
               
            });
        })

    }



    handleRoleupdate() {






        let departmentId = parseInt(sessionStorage.getItem("departmentId"))
        let moduleWatch = this.state.checkedValues.join(",")
        updateModuleConfig2Api(this.state.RolecheckedValues, departmentId, moduleWatch).then((res) => {
            // console.log(res);
            info('修改成功')
            this.handlefind()
        }).catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                // console.info(e.response.data)
                // console.info(e.response.status)
                // console.info(e.response.headers)
                // console.info("zzz"+moduleWatch);
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message);
            }
            console.info(e.config)
        });


    }


    render() {
        const children = []
        for (let i = 0; i < this.state.roles.length; i++) {
            children.push({
                label: this.state.roles[i].rolename,
                value: this.state.roles[i].Id,
                disabled: false
            })
        }
        return (
            <div>
                <h2>配置显示模块</h2>

                {this.state.checkedValues.length == 0 ? <CheckboxGroup options={['巡更', '巡检', '校内网格', "校外网格", "考勤"]} value={this.state.checkedValues} onChange={this.onChange.bind(this)} /> :
                    <CheckboxGroup options={['巡更', '巡检', '校内网格', "校外网格", "考勤"]} value={this.state.checkedValues} onChange={this.onChange.bind(this)} />
                }

                {
                    this.state.type === "add" ? <Button onClick={this.handlesubmit.bind(this)}>提交</Button> : <Button onClick={this.handleupdate.bind(this)}>修改</Button>
                }

                <h2>配置角色查看权限</h2>



                <CheckboxGroup options={children} value={this.state.defalutrole} onChange={this.onRoleChange.bind(this)} />

                {
                    this.state.defalutrole.length == 0 ? <Button onClick={this.handleRolesubmit.bind(this)}>提交</Button> : <Button onClick={this.handleRoleupdate.bind(this)}>修改</Button>
                }

            </div>
        )
    }
}


//考勤年级学生分布柱状图
class StudentForGradeBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            xdata: props.chartData.xdata || [],
            data1: props.chartData.data1 || [],
            data2: props.chartData.data2 || [],
            that: props.that,
            divId: props.divId,
        }
    }

    componentDidMount() {

        this.refreshdata()
    }
    refreshdata() {

        let chart = echarts.init(document.getElementById(this.state.divId));
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
            },
            legend: {
                data: ['在校', '离校'],
                textStyle: { color: "#F0FFF0" }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '20%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.state.xdata,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#1ED2FF'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    max: 100,
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value} %',
                        textStyle: {
                            color: '#1ED2FF'
                        }
                    },
                }
            ],
            series: [

                {
                    name: '在校',
                    type: 'bar',
                    stack: '学生',
                    emphasis: {
                        focus: 'series'
                    },

                    data: this.state.data1
                },
                {
                    name: '离校',
                    type: 'bar',
                    stack: '学生',
                    emphasis: {
                        focus: 'series'
                    },

                    data: this.state.data2
                },


            ]
        };
        chart.setOption(option)
    }

    render() {

        return (
            <div id={this.state.divId} className="screenEcharts" >

            </div>)


    }


}

//考勤学生进出次数柱状图
class StudentInOrOutTimesBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            xdata: props.chartData.xdata || [],
            ydata: props.chartData.ydata || [],
            that: props.that,
            divId: props.divId,
        }
    }

    componentDidMount() {
        this.refreshdata()
    }
    refreshdata() {

        let chart = echarts.init(document.getElementById(this.state.divId));
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '5%',
                left: '3%',
                right: '4%',
                bottom: '30%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#1ED2FF'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: this.state.ydata,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#1ED2FF'
                    }
                }
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    data: this.state.xdata
                },
            ]
        };
        chart.setOption(option)
    }

    render() {

        return (
            <div id={this.state.divId} className="screenEcharts" >

            </div>)


    }


}


// 转为unicode 编码  
function encodeUnicode(str) {
    var res = [];
    for (var i = 0; i < str.length; i++) {
        res[i] = ("00" + str.charCodeAt(i).toString(16)).slice(-4);
    }
    return "\\u" + res.join("\\u");
}

//解码
function decodeUnicode(str) {
    str = str.replace(/\\/g, "%");
    return unescape(str);
}

// export default BigScreen
export { OutGrid, InnerGrid, Patrol, Polling, TimeBar, BigScreenSetUp, BigScreenHoc, LunBoNotice, KaoQin }